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探索 ES6 : 升级 至 JavaScript 的 下 一 个 版 本 


一 本 对 JavaScript 最 新 特性 深入 探讨 的 书籍 ， 是 ECMAScript 2015 中 新 引入 特性 
的 一 份 全 面 指南 。 


为 什么 要 翻译 这 本 书 ? 


很 多 人 说 ， 阮 老师 已 经 有 一 本 关于 ES6 的 书 了 - 《ECMAScript 6 入 门 》， 觉 得 看 
看 这 本 书 就 足够 了 。 


阮 老师 的 那 本 书 确实 不 错 ， 值 得 ES6 初学 者 去 阅读 。 但 是 阮 老 师 对 这 本 书 的 定位 
是 “中 级 难度 "， 也 就 是 说 书 中 不 会 很 深入 地 去 剖析 各 个 知识 点 ， 而 《Exploring ES6 
》 这 本 书 就 努力 在 向 大 家 细致 地 深入 地 讲解 ES6 的 方方面面 ， 这 也 是 我 觉得 这 本 
书 很 不 错 的 原因 。 


此 外 ，《 Exploring ES6 》 的 作者 对 JavaScript 有 上 比较 深入 全 面 的 了 解 ， 也 出 了 一 
本 ES5 及 之 前 版 本 的 书 《 Speaking JavaScript: An In-Depth Guide for 
Programmers 》。 


所 以 ， 总 的 来 说 ，《 Exploring ES6 》 还 是 值得 一 看 的 。 


目录 

点 此 处 。 

关于 这 本 书 

e。 包含 ECMAScript 6 (也 被 称 为 ECMAScript 2015 ) 可 靠 及 深入 的 信息 。 
@ 本 书面 向 已 经 了 解 JavaScript 的 读者 。 


即使 官方 名 称 已 经 修改 为 ECMAScript 2015， 这 本 书 也 将 保持 ECMAScript 6 
的 称呼 该 称呼 已 广为人知 。 





如 何 加 入 翻译 


. fork 项 目 ; 

. 提出 issue ， 表 明 自 己 想 翻 译 哪 些 内 容 ， 时 间 大 致 是 多 久 ; 

.组 织 者 会 审核 此 issue ， 审 核 完 成 后 会 将 issue 设 为 翻译 中 状态 ， 此 时 申请 
者 可 以 开始 翻译 了 ; 

4. 翻译 完 之 后 ， 提 交 pull request ， 并 将 相应 issue 修改 为 翻译 完成 ; 

5. pull request 审核 通过 后 会 被 合并 到 master 分 支 ，issue 状态 会 被 改 为 

review 通过 ， 
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6. 如 果 在 指定 时 间 内 还 没 翻译 完 ， 则 相应 issue 就 会 被 设 为 超时 未 完成 状态 ， 
此 时 该 部 分 翻译 内 容 可 能 会 被 重新 分 配给 其 他 人 。 


Changelog 


原 书 Changelog 


捐助 


如 果 您 觉得 本 翻译 对 您 有 帮助 ， 并 且 愿 意 在 金钱 上 给 予 翻译 者 鼓励 ， 以 间接 的 方式 
推进 本 书 的 翻译 和 校对 ， 请 扫 一 扫 下 面 的 支付 宝 二 维 码 : 


支付 宝 扫 一 扫 ， 癌 我 付款 





如 果 您 觉得 本 翻译 很 垃圾 ， 请 在 issue 中 提出 来 ， 或 者 直接 提交 pull request ， 对 
于 您 的 批评 和 贡献 ， 我 们 将 不 胜 感激 ! 


这 本 书 你 需要 知道 的 


这 本 书 是 关于 ECMAScript 6 (也 被 称 为 ECMAScript 2015 ) 的 ， 它 是 JavaScript 
的 新 版 本 。 


本 书 读 者 : JavaScript 程序 员 


为 了 读 懂 这 本 书 ， 你 应 该 已 经 知道 JavaScript 。 如 果 不 知 道 : 我 另外 一 本 免费 在 线 
书 《Speaking JavaScript》 讲 解 了 JavaScript 的 所 有 内 容 (直到 并 且 包 括 
ECMAScript 5 ) 。 


为 什么 应 该 阅读 这 本 书 ? 


这 本 书包 含 了 ECMAScript 6 的 详细 内 容 ， 但 是 组 织 良好 ， 六 全 二 体能 蕊 快速 得 到 一 
个 预览 。 它 不 仅 讲解 了 ES6 如 何 工作 ， 也 讲解 了 为 什么 要 这 么 工作 。 


如 何 阅读 这 本 书 


这 本 书 有 很 多 内 容 ， 但 是 它 的 组 织 结构 区 分 了 不 同 难 度 级 别 的 内 容 ， 很 容易 匹配 上 
你 的 需求 。 有 三 种 内 容 级 别 : 


@ 快速 开始 : 绝 大 多 数 章 以 一 个 简明 的 概览 开始 ， 描 述 了 本 章节 涉及 到 的 特性 。 

e@ 坚实 的 基础 : 每 一 章 都 是 以 必需 9 内容 开始 。， 估 后 过 上 进入 名 节 。 标题 应 该 能 
让 你 明白 什么 时 候 停止 阅读 ， 但 是 我 也 偶尔 在 侧 边 栏 给 出 小 提示 ， 告 诉 你 了 解 
某 些 内 容 的 重要 性 。 


1 关于 ECMAScript 6 ( ES6 ) 


经 过 漫长 的 时 间 ， 最 终 ， 作 为 下 一 代 JavaScript 的 ECMAScript 6 总 算 变 为 现实 : 
e@ 在 2015 年 6 月 成 为 标准 。 
e 浏览 器 的 JavaScript 引擎 逐渐 实现 它 的 特性 (参考 kangax 的 ES6 兼容 表 
格 ) 。 
e 编译 工具 (比如 Babel 和 Traceur) 能 将 ES6 编译 成 ES5 。 


下 一 节 讲 解 了 在 ES6 世界 中 比较 重要 的 几 个 概念 。 


1.1TC39 ( Ecma 技术 委员 会 39 ) 


TC39 ( Ecma 技术 委员 会 39 ) 是 负责 改进 JavaScript 的 委员 会 。 它 的 成 员 是 公 
司 (尤其 是 所 有 的 主流 浏览 器 厂商 ) 。TC39 开会 很 频繁 ， 参 会 者 来 自 于 成 员 公司 
的 代表 和 邀请 的 一 些 专家 。 大 会 的 部 分 现场 视频 可 以 在 网 上 看 到 ， 这 些 视频 展示 了 
TC39 是 如 何 工 作 的 。 


1.2 ECMAScript 6 是 如 何 设 计 的 


ECMAScript 6 的 设计 过 程 集中 在 特性 提案 上 。 提 案 通常 来 自 于 开发 者 社区 的 建 
议 。 为 了 避免 委员 会 参与 设计 ， 提 案由 志愿 者 (1 -2 名 委员 会 的 委托 人 ) 维护 。 


一 个 提案 在 成 为 标准 之 前 会 经 历 下 面 的 步骤 : 


e。 梗概 ( Sketch ) ( 非 正式 地 : “普通 人 提案 ”) : 提案 特性 的 第 一 个 描述 。 

e 提案 ( Proposal ) : 如 果 TC39 认为 某 个 特性 是 重要 的 ， 那 么 此 特性 就 上 升 
为 官方 提案 状态 。 这 并 不 会 保证 最 终 会 成 为 标准 ， 但 是 大 大 地 增加 了 成 为 标准 
i 性 。ES6 提案 的 截止 日 期 是 2011 年 5 月 ， 在 这 之 后 不 会 考虑 重大 的 新 提 


本 
。 实现 ( Implementations ) : 提案 特性 必须 被 实现 ， 在 理想 情况 下 ， 要 支持 两 
种 JavaScript 引擎。 在 提 是 案 区 和 导 提 升 的 时 候 ， 来 自 于 社区 的 实现 和 反馈 决定 了 
是 案 的 样子 。 
。 标准 ( Standard ) : 如 果 提 案 持续 检验 自身 ， 并 且 被 TC39 接受 ， 那 么 该 提 
案 将 最 终 包 含 进 ECMAScript 标准 的 一 个 版 本 中 。 此 时 ， 就 成 了 一 个 标准 特 
性 O 


[本 节 来 源 : 《The Harmony Process 》， 作 者 David Herman 。] 


1.2.1 ES6 之 后 的 设计 进 


从 ECMAScript 7 (官方 名 字 是 ECMAScript 2016 ) 开始 ，TC39 将 会 按时 发 布 每 
一 版 本 。 计 划 每 年 发 布 一 个 新 的 ECMAScript 版 本 ， 此 版 本 带 有 当时 已 就 绪 的 特 
性 。 这 意味 着 从 现在 开始 ， ECMAScript 版 本 将 会 是 小 的 升级 。 


ECMAScript 2016 (以 及 接 下 来 的 版 本 ) 已 经 开始 制定 了 ， 所 有 当前 的 提 委 都 在 
GitHub 上 面 列 出 。 流 程 也 已 经 改变 了 ， 在 TC39 流程 文档 中 有 描述 。 


1.3 JavaScript vs ECMAScript 


大 家 都 称呼 这 门 语 言 是 JavaScript ， 但 是 这 个 名 字 是 一 个 商标 (属于 Oracle 的 ， 
从 Sun 接手 过 来 的 ) 。 因 此 ，JavaScript 的 官方 名 字 是 ECMAScript 。 这 个 名 字 
来 自 于 标准 组 织 Ecma ， 该 组 织 管理 语言 标准 。 既 然 ECMAScript 这 个 名 字 获 得 大 
家 的 认可 了 ， 那 么 标准 组 织 的 名 字 就 由 缩写 ECMA " 变 为 了 Ecma ”。 规 范 中 定义 
的 每 一 个 JavaScript 版 本 都 采用 该 语言 的 官方 名 称 。 因 此 ，JavaScript 标准 的 第 
一 版 本 称 为 ECMAScript 1 ， 是 "“ ECMAScript Language Specification, Edition 1 
"的 缩写 。 ECMAScript x 也 通常 缩写 为 ESx 。 


1.4 升级 到 ES6 


Web 的 参与 者 包含 : 


e。 JavaScript 引擎 的 实现 者 
e。 Web 应 用 的 开发 者 
e 用 户 


这 三 种 角色 相互 之 间 的 约束 控制 很 小 。 这 就 是 为 什么 升级 Web 语言 很 有 挑战 性 。 


一 方面 ， 升 级 引擎 很 有 挑战 ， 因 为 要 应 对 运行 于 Web 的 各 种 各 样 的 代码 ， 某 些 时 候 
是 很 老 的 代码 。 你 也 硕 望 引擎 自动 升级 ， 尽 量 让 用 户 感知 不 到 。 因 此 ，ES6 是 
ES5 的 超 集 ， 没 有 移 除 任何 东西 。ES6 升级 了 语言 ， 但 是 并 没有 引入 新 的 版 本 或 
者 模式 。 它 甚至 使 严格 模式 成 为 默认 的 执行 模式 (通过 模块 ) ， 而 没有 增加 与 非 严 
格 模式 差异 。 采 用 的 手法 被 称 为 One JavaScript”， 会 在 单独 的 一 章 里 面 讲解 。 


另 一 方面 ， 升 级 代码 具有 挑战 性 ， 因 为 你 的 代码 必须 能 在 目标 用 户 使 用 的 各 种 各 样 
的 JavaScript 引擎 上 面 运 行 。 因 此 ， 如 果 你 想 在 你 的 代码 中 使 用 ES6 ， 仅 有 两 个 
选择 : 等 到 目标 用 户 不 再 使 用 非 ES6 的 引擎 ， 这 将 会 等 好 几 年 ; 当 ES6 在 2015 年 
6 月 成 为 标准 的 事后 ， 主 流 用 户 使 用 的 引擎 都 支持 ES5 了 (然而 ES5 早 在 2009 年 
12 月 就 成 为 标准 了 ) ， 因 此 可 以 将 ES6 代码 编译 成 ES5 代码 ， 现 在 就 用 起 来 ( 关 
于 怎么 做 ， 会 在 单独 的 一 章 中 讲解 ) 。 


目标 和 需求 在 ES6 的 设计 中 产生 了 冲突 : 


e 目标 是 修复 JavaScript 的 陷阱 ， 并 且 添 加 新 的 特性 。 
。 需求 是 既 要 让 老 代码 能 够 运行 ， 又 要 保持 语言 的 轻 量 性 。 


1.5 ES6 的 目标 


Harmony/ES6 的 原始 项 目 有 几 个 目标 。 在 下 面 的 子 节 里 ， 我 会 讲解 其 中 一 些 目 
标 。 


1.5.1 目标 : 成 为 一 门 更 好 的 语言 
目标 是 : 成 为 一 门 对 编写 如 下 程序 更 友好 的 语言 


e 1、 复 杂 的 应 用 ; 
e。 2、 应 用 之 间 共 享 的 库 〈 可 能 包含 DOM 操作 ) ; 
e。 3、 针 对 新 版 本 的 代码 生成 器 。 


子 目标 (1) 承认 了 用 JavaScript 开发 的 应 用 已 经 变 得 很 大 了 。 达 成 这 个 目标 的 关 
键 ES6 特性 就 是 内 置 模块 。 


模块 也 是 目标 〈2) 的 解决 方案 。 说 句 题 外 话 ， 在 JavaScript 里 实现 DOM 是 出 了 
名 的 困难 。ES6 的 Proxy 应 该 会 有 所 帮助 (这 会 在 单独 的 一 章 中 讲解 ) 。 

特意 添加 了 几 个 特性 ， 这 些 特性 不 是 为 了 提升 JavaScript ， 而 是 使 其 它 语言 更 容 多 
编译 成 JavaScript 。 举 两 个 例子 : 


e。 Math.fround() - 舍 入 为 32 位 的 浮 点 数 
SO 


它们 对 于 将 其 它 语言 (例如 C/C++ 通过 Emscripten 编译 ) 编译 成 JavaScript 是 很 
有 用 的 。 


1.5.2 目标 : 提升 互 操作 性 


目标 是 : 提升 互 操作 性 ， 尽 可 能 采用 事实 上 的 标准 。 
四 个 例子 : 


类 : 基于 现今 构造 器 的 使 用 方式 。 

模块 : 从 CommonJS 模块 格式 中 提取 设计 思想 。 

箭头 函数 : 从 CoffeeScript 中 借用 过 来 的 语法 。 

命名 函数 参数 : 对 于 命名 参数 ， 没 有 内 置 的 支持 。 但 是 ， 可 以 通过 对 象 字 面 量 
结合 参数 定义 的 解构 来 实现 命 名 参数 。 


1.5.3 目标 : 版 本 控制 
目标 是 : 尽量 使 版 本 控制 简单 并 且 线性 的 。 


正如 前 面 提 到 的 ，ES6 避免 * One JavaScript " 式 的 版 本 管理 : 在 一 个 ES6 的 代码 
库 里 ， 所 有 代码 都 是 ES6 的 ， 没 有 任何 一 部 分 是 ES6 特有 的 。 


1.5 ES6 的 目标 
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1.6 ES6 特性 概览 


引用 ECMAScript 6 规范 中 的 一 段 介绍 : 


ECMAScript 6 的 一 些 主要 增强 功能 ， 包 括 模块 、 类 声明 、 词 块 作用 域 、 和 迭代 
器 、 生 成 器 、 用 于 异步 编程 的 Promise 、 解 构 模 式 和 应 该 有 的 尾 递归 调用 。 
ECMAScript 内 置 库 已 经 开始 支持 其 它 的 抽象 数据 ， 包 括 Map ，Set ， 二 进 
制 数字 值 数组 ， 对 Unicode 字符 串 中 字符 的 额外 支持 ， 正 则 表达 式 。 内 置 类 型 
现在 可 以 通过 继承 来 扩展 了 。 


有 三 组 主要 特性 : 


e@ 对 于 已 经 存在 的 特性 (例如 通过 库存 在 的 特性 ) 提供 更 好 的 语法 。 例 如 : 
o 类 
o 模块 

e@ 标准 库 新 的 功能 。 例 如 : 
o 字符 事 和 数组 的 新 方法 
o Promise 
o Map ， Set 

e 全 新 的 特性 。 例 如 : 
o 生成 器 
o _ Proxy 
o WeakMap 


1.7 ECMAScript 简 史 


本 节气 述 了 发 展 到 ECMAScript 6 的 过 程 中 所 发 生 的 事情 。 


1.7.1 早 些 年 : ECMAScript 1-3 


。 ECMAScript 1 (1997 年 6 月 ) 是 JavaScript 语言 规范 的 第 一 个 版 本 。 

。 ECMAScript 2 (1998 年 6 月 ) 包含 了 一 些小 的 变化 ， 为 了 使 规范 与 独立 的 
JavaScript ISO 标准 保持 同步 。 

ECMAScript 3 (1999 年 12 月 ) 引 入 了 很 多 特性 9 已 经 成 为 语言 的 流行 部 分 


1.7.2 ECMAScript 4 (在 2008 年 6 月 被 抛弃 ) 


在 1999 年 ES3 发 布 之 后 ， 就 开始 了 ES4 的 制定 工作 。 在 2003 年 ， 发 布 了 一 份 临 时 
报告 ， 在 这 之 后 ES4 的 制定 工作 就 暂停 了 。 Adobe 的 ActionScript 和 微软 的 
JScript.NET 实现 了 临时 报告 中 所 描述 语言 的 子 级 。 


在 2005 年 2 月 ，Jesse James Garrett 发 现 新 技术 变 得 流行 起 来 ， 被 用 于 实现 动态 
的 使 用 JavaScript 的 前 端 app 。 他 称呼 这 些 技术 为 Ajax 。 Ajax 开启 了 web app 
的 全 新 世界 ， 并 使 人 们 对 JavaScript 产生 了 浓厚 的 兴趣 。 


这 使 得 TC39 在 2005 年 秋天 重启 ES4 的 制定 工作 。 他 们 基于 ES3 来 制定 ES4 ， 
临时 的 ES4 在 ActionScript 和 JScript.NET 中 实现 。 


当时 有 两 个 组 从 事 制定 未 来 ECMAScript 版 本 的 工作 : 


e ECMAScript 4 由 Adobe ，Mozilla ，Opera 和 Google 设计 ， 是 一 个 很 大 的 
升级 。 它 包含 的 特性 集 如 下 : 
o 大 型 编程 (类 ， 接 口 ， 命 名 空间 ， 包 ， 程 序 单元 ， 可 选 的 类 型 注释 ， 可 选 
的 静态 类 型 检测 和 验证 ) 
o 编程 和 脚本 的 进化 【结构 类 型 ， 鸭 子 类 型 ， 类 型 定义 ， 和 方法 重 载 ) 
o 数据 结构 完善 (参数 化 类 型 ，getter 和 setter ， 和 元 级 的 方法 ) 
o 控制 抽象 (恰当 的 尾 递归 ， 迭 代 器 ， 和 生成 器 ) 
o 反思 (类 型 元 对 象 和 堆栈 标记 ) 
。 ECMAScript 3.1 由 微软 和 Yahoo 设计 。 计 划 成 为 ES4 的 子 集 ， 并 且 是 
ECMAScript 3 的 增 量化 升级 ， 没 有 bug 修复 和 小 的 新 特性 。 ECMAScript 3.1 
最 终 成 为 了 ECMAScript 5 。 


这 两 个 组 关于 JavaScript 未 来 产生 了 分 此 ， 他 们 之 间 的 紧张 局 势 也 逐渐 升级 。 
本 节 来 源 : 
《 Proposed ECMAScript 4th Edition ~ Language Overview 》，2007-10-23 
《ECMAScript Harmony 》， 作 者 John Resig ，2008-08-13 


1.7.3 ECMAScript Harmony 


2008 年 7 月 底 ，TC39 在 Oslo 开 了 个 会 ，Brendan Eich 描述 会 议 结果 如 下 : 


JavaScript 标准 正文 不 是 秘密 ，Ecma 的 技术 委员 会 39 已 经 分 裂 超过 一 年 了 ， 
一 些 成 员 喜欢 ES4 [...] ， 一 些 成 员 倡导 ES3.1[.…] 。 现 在 ， 我 很 高 兴 地 说 ， 分 
裂 结 束 了 。 


会 议 就 四 点 上 达成 了 一 致 : 


e。 1、 开 发 一 个 增 量 升级 的 ECMAScript (就 是 ECMAScript5 ) 。 

e。 2、 开 发 一 个 主要 的 新 版 本 ， 相 对 于 ES4 更 加 现代 化 ， 但 是 在 范围 上 比 
ECMAScript 3 之 后 的 版 本 大 得 多 。 这 个 版 本 代号 为 Harmony ， 名 字源 于 会 议 
要 达成 的 消除 分 歧 的 目标 。 

e。3、 来 自 于 ECMAScript 4 的 特性 被 取消 了 一 部 分 : 包 ， 命 名 空间 ， 早 绑 定 。 

e。 4、 其 他 想法 在 TC39 达成 一 致 后 才 开 发 。 


因此 : ES4 小 组 同意 不 让 Harmony 像 ES4 那么 激进 ， 剩 下 的 TC39 成 员 赞 成 继 
续 推 进 。 


接 下 来 的 ECMAScript 版 本 是 : 


。ECMAScript 5 (2009 年 12 月 ) 。 这 是 目前 大 多 数 浏览 器 实现 的 ECMAScript 
版 本 。 它 给 标准 库 引 入 了 几 处 增强 ， 并 且 通 过 严格 模式 升级 了 语言 的 语义 。 
e。 ECMAScript 6 (2015 年 6 月 ) 。 该 版 本 经 历 了 几 次 名 字 修 改 : 
o ECMAScript Harmony : 是 最 初 的 代号 ， 用 于 ECMAScript 5 之 后 的 
JavaScript 的 改进 。 
o ECMAScript.next : 很 明显 ，Harmony 的 计划 对 于 一 次 版 本 升级 来 说 显 
得 太 雄 心 勃 勃 了 ， 因 此 它 的 特性 分 成 了 两 组 : 第 一 组 有 很 高 的 优先 级 ， 成 
为 继 ES5 之 后 的 版 本 。 为 了 避免 过 旱地 涉及 到 版 本 号 ， 这 个 版 本 的 代号 
就 是 ECMAScript.next ，ES4 就 因为 这 个 产生 了 很 多 问题 。 第 二 组 特性 
直到 ECMAScript.next 之 后 才 有 时 间 了 。 
o ECMAScript 6 : 当 ECMAScript.next 成 熟 之 后 ， 它 的 代号 就 弃 用 了 ， 大 
家 都 开始 称 其 为 ECMAScript6 。 
o ECMAScript 2015 : 在 2014 年 底 ，TC39 决定 将 官方 的 ECMAScript 6 
名 字 修 改 为 ECMAScript 2015 ， 根 据 接 下 来 的 每 年 发 布 规范 的 策略 。 
e ECMAScript 2016 之 前 被 叫做 ECMAScript 7 。 开 始 于 ES2016 ， 语 言 标准 将 
会 每 年 发 布 一 个 小 的 版 本 。 


2 ECMAScript 6 常见 问题 解答 


本 章 解 答 了 几 个 常 问 的 关于 ECMAScript 6 的 问题 。 


2.1 当前 引擎 支持 ES6 情况 如 何 ? 


格 


全 查 ES6 在 各 引擎 上 的 支持 情况 的 最 好 方式 就 是 去 查看 Kangax 的 ES6 兼容 表 
格 。 


2.2 如 何 将 ECMAScript 5 代码 升级 至 ECMAScript 6 
2 


什么 都 不 用 做 : ECMAScript 6 是 ECMAScript 5 的 超 集 。 因 此 ， 所 有 的 ES5 代码 
自动 的 就 是 ES6 代码 了 。 关 于 ES6 是 如 何 保持 向 后 兼容 性 的 ， 在 关于 “ One 
JavaScript "的 那 一 章 讲解 。 


如 果 你 想 知 道 现 在 如 何 使 用 新 的 ES6 特性 (这 是 另 一 个 的 问题 ) ， 转 到 章节 “部 署 
ECMAScript 6 。 


2.3 现在 学 习 ECMAScript 5 还 有 意义 吗 ? 


正如 “部署 ECMAScript 6 " 那 一 章 讲述 的 ， 你 现在 就 可 以 使 用 ES6 编写 代码 了 ， 无 
需 在 日 的 JavaScript 版 本 下 编写 代码 。 难 道 这 意味 着 不 再 需要 学 习 ECMAScript 5 
了 吗 ? 不 是 这 样 的 ， 有 这 样 几 个 理由 : 


ECMAScript 6 是 ECMAScript 5 的 超 集 - 新 的 JavaScript 版 本 不 能 破坏 已 有 
的 代码 。 因 此 ， 学 习 ECMAScript 5 不 是 徒劳 的 。 

有 几 个 ECMAScript 6 特性 特 换 掉 了 ECMAScript 5 的 特性 ， 但 是 仍然 可 以 使 
用 它们 作为 基本 原理 。 理 解 这 些 原 理 很 重要 。 两 个 例子 : 类 在 内 部 转换 成 构造 
器 ， 并 且 方 法 依然 是 函数 (就 像 以 前 一 样 ) 。 

只 要 ECMAScript 6 编译 成 了 ECMAScript 5 ， 对 于 理解 编译 过 程 很 有 用 。 并 
且 你 可 能 在 未 来 好 几 年 都 要 像 这 样 编译 成 ES5 ， 直 到 ES6 在 相应 浏览 器 中 得 
到 了 支持 。 

能 够 看 懂 遗 留 的 代码 很 重要 。 


2.4 ES6 腑 肿 吗 ? 


我 看 见 人 们 抱 奶 ES6 使 JavaScript 变 得 脐 肿 ， 包 含 了 太 多 无 用 的 “语法 糖 ”( 为 已 经 
存在 的 东西 制定 的 更 方便 的 语法 ) 。 


如 果 有 人 觉得 这 样 的 话 ， 我 建议 使 用 ES6 一 段 时 间 。 没 人 强迫 你 使 用 任何 新 的 特 
性 。 你 可 以 从 一 些小 的 特性 开始 使 用 (例如 模板 字面 量 和 箭头 了 兄 数 ) ， 然 后 在 你 对 
ES6 感到 更 舒服 的 时 候 ， 使 用 更 多 的 新 特性 。 到 目前 为 止 ， 我 从 真正 使 用 了 ES6 
的 人 (不 是 仅仅 在 书 中 阅读 过 的 人 ) 那里 得 到 的 反馈 来 看 ， 大 多 数 还 是 很 积极 的 。 


此 外 ， 表 面 上 看 起 来 是 语法 糖 的 特性 (比如 类 和 模块 ) ， 引 入 了 很 多 需要 的 标准 到 
语言 中 ， 并 作为 未 来 特性 的 基础 。 


最 后 ， 有 几 个 特性 并 不 是 为 普通 开发 者 创 建 的 ， 是 为 库 的 开发 者 创建 和 (例如 生成 


器 


器 ， 迁 代 器 ，Proxy 等 ) 。“ 普 通 开 发 者 "只 需要 粗略 地 知道 就 行 了 。 


2.5 ES6 规范 文档 不 是 很 长 吗 ? 


ECMAScript 规范 文档 的 确 变 长 了 很 多 : ECMAScript 5.1 PDF 有 245 页 ，ES6 
PDF 有 593 页 。 但 是 ， 作 为 对 比 ，Java 8 语言 规范 有 724 页 (不 包括 索引 ) 。 而 
且 ，ES6 规范 包含 了 实现 细节 ， 而 其 他 语言 省 略 了 。 规 范 也 说 明了 标准 库 是 如 何 
工作 的 。 


2.6 ES6 包含 了 数组 生成 表达 式 ( Array 
Comprehension ) 吧 ? 


本 来 ， ES6 计划 纳入 数组 和 生成 器 的 生成 表达 式 〈 类 似 于 Haskell 和 Python ) 。 
但 是 被 推迟 到 ES6 之 后 ， 因 为 TC39 想 思 考 两 个 东西 : 


能 需要 能 够 创建 生成 表达 式 ， 对 任何 数据 类 型 都 有 效 (参考 微软 的 LINQ 


BA 


e 给 迭代 器 添加 相应 的 方法 来 实现 生成 表达 式 所 实现 的 功能 可 能 更 好 。 


2.7 ES6 是 静 态 类 型 的 吗 ? 


静态 类 型 不 是 ES6 的 一 部 分 。 然 而 ， 下 面 的 两 种 技术 给 JavaScript 引入 了 静态 类 
型 的 功能 。 类 似 的 特性 可 能 最 终 会 被 标准 化 。 


e 微软 的 TypeScript : 基本 上 是 ES6 加 上 可 选 的 类 型 注解 。 此 时 ， 如 果 这 样 做 
的 话 ， 编 译 成 的 ES5 会 丢掉 类 型 信息 。 也 可 以 使 类 型 信息 在 运行 时 可 用 ， 这 
些 信 息 用 于 类 型 反 查 和 运行 时 类 型 检测 。 

。Facebook Flow : 是 一 个 ECMAScript 6 的 类 型 检测 器 ， 基 于 流 分 析 ( flow 
analysis ) 。 因 此 ， 它 仅 给 语言 增加 了 可 选 的 类 型 注解 ， 以 及 推理 类 型 和 检查 
类 型 ， 并 不 会 帮助 将 ES6 代码 编译 成 ES5 代码 。 

静态 类 型 的 三 个 好 处 是 : 

。 能 够 提前 检测 到 某 些 错误 ， 因 为 代码 可 以 被 静态 分 析 (在 开发 阶段 ， 不 用 执行 
代码 ) 。 因 此 ， 静 态 类 型 和 测试 、 捕 获 不 同类 型 错误 是 互补 的 。 

。 能 够 帮助 IDE 自动 补 全 。 

TypeScript 和 Flow 使 用 相同 的 注解 。 类 型 注解 是 可 选 的 ， 这 使 得 这 种 方式 相当 轻 
量 。 即 便 没 有 注解 ， 通 常 也 能 够 推断 类 型 。 因 此 ， 这 种 类 型 检查 甚至 对 于 完全 没 注 
解 的 代码 也 很 有 用 ， 用 作 一 种 辅助 的 检查 。 


2.8 应 该 避免 使 用 类 吗 ? 


我 推荐 使 用 类 。 我 在 关于 类 的 那 一 章 讲解 了 它 的 优点 和 缺点 。 


2.9 ES6 有 特性 ( traits ) 或 者 混入 (mixins ) 
吗 7? 


没有 ， 但 是 目前 类 的 一 个 目标 就 是 作为 将 来 可 能 的 特性 ( traits ) (或 者 类 似 
的 可 以 做 多 继承 的 方式 ) 的 一 个 基础 。 


可 以 从 库 traits 中 初步 看 到 特性 ( traits ) 的 样子 。 这 是 一 个 库 ， 因 此 限制 了 
语法 格式 ; 只 要 特性 ( traits ) 成 为 语言 的 特性 ， 就 会 有 更 加 漂亮 的 语法 了 。 


2.10 为 什么 ES6 有 带 => 的 箭头 函数 ， 而 没有 带 
-> 的 箭头 函数 ? 


ECMAScript 6 对 于 有 函数 有 词法 this 的 语法 ， 就 是 所 谓 的 箭头 函数 。 但 是 ， 对 于 
函数 没有 动态 this 的 箭头 函数 语法 。 这 是 故意 的 ; 方法 定义 覆盖 了 带 -> 篆 
头 的 函数 的 绝 大 多 数 使 用 场景 。 如 果 盖 的 需要 动态 的 this ， 你 可 以 使 用 传统 的 
函数 表达 式 。 


2.11 在 哪里 可 以 找到 更 多 的 ES6 资源 ? 


有 两 组 ES6 资源 : 


e。 “ECMAScript 6 Tools ”， 作 者 Addy Osmani 。 
e。 “ECMAScript 6 Learning! ”， 作 者 Eric Douglas 。 


3 一 个 JavaScript : 在 ECMAScript 6 中 避免 版 
本 化 


给 一 门 语言 添加 新 特性 的 最 好 方式 是 什么 ?本章 描述 了 ECMAScript 6 使 用 的 方 
式 。 它 被 称 作 一 个 JavaScript ， 因 为 避免 了 版 本 化 。 


3.1 版 本 化 


原则 上 ， 语 言 的 一 个 新 版 本 是 一 个 清理 的 机 会 ， 可 以 清理 过 时 的 特性 或 者 改变 特性 
的 工作 方式 。 这 意味 着 新 的 代码 在 语言 的 日 的 实现 中 无 法 工作 ， 老 的 代码 在 新 的 实 
现 中 无 法 工作 。 每 段 代码 都 和 特定 的 语言 版 本 关联 。 针 对 两 个 不 同 语言 版 本 写 两 种 
不 同 代 码 是 很 常见 的 。 


首先 ， 你 可 以 使 用 一 种 “用 所 有 还 是 什么 都 不 用 ”的 方式 : 如 果 一 个 代码 库 需 要 使 用 
新 的 语言 版 本 ， 就 必须 彻底 升级 。Python 在 从 Python 2 升级 到 Python 3 的 时 候 就 
是 这 样 的 。 这 样 的 话 有 个 问题 ， 将 已 有 的 代码 库 一 次 性 全 部 升级 可 能 是 做 不 到 的 ， 
尤其 是 代码 库 很 大 的 时 候 。 而 且 ， 这 种 方式 对 于 Web 来 说 是 不 可 行 的 ， 因 为 总 是 有 
老 代 码 ， 而 且 JavaScript 引擎 会 自动 升级 。 


第 二 ， 你 可 以 让 一 个 代码 库 包 含 在 多 个 语言 版 本 都 可 运行 的 代码 ， 通 过 根据 版 本 切 


换代 码 的 方式 。 你 可 以 通过 一 个 专用 的 互联 网 媒体 类 型 标记 ECMAScript 6 的 代 
码 。 这 样 的 媒体 类 型 可 以 和 一 个 HTTP 头 关联 在 一 起 : 


Content -Type: application/ecmascript;version=6 


也 可 以 和 <script> 元 素 中 的 type 属性 关联 在 一 起 ( type 默认 值 是 
text/javascript ) : 
<script type="application/ecmascript;version=6"> 


</SCIlt> 


这 是 在 代码 之 外 指定 版 本 。 另 一 种 方案 是 在 代码 内 指定 版 本 。 例 如 ， 将 下 面 的 代码 
放 在 JavaScript 文件 的 第 一 行 : 


use version 6; 


两 种 标记 的 方法 都 很 容易 产生 问题 : 外 部 版 本 标记 法 很 脆弱 ， 容 易 丢 失 ; 内 部 版 本 
标记 法 又 会 使 代码 显得 杂乱 。 
一 个 更 根本 的 问题 是 ， 针 对 不 同 的 语言 版 本 ， 要 维护 不 同 的 执行 引擎 。 这 就 引起 了 


一 些 问题 : 


e@ 引擎 变 得 采 肿 ， 因 为 要 实现 所 有 版 本 的 语义 。 对 于 分 析 语言 的 工具 也 带 来 了 同 
样 的 问题 (比如 类 型 检测 ，JSLint ) 。 

e@ 开发 者 需要 记 住 版 本 之 间 的 不 同 点 。 

。 代码 变 得 更 加 难以 重 构 ， 因 为 在 移动 代码 的 时 候 需要 考虑 语言 版 本 的 问题 。 


因此 ， 应 该 避免 版 本 化 ， 尤 其 是 JavaScript 和 web 。 


3.1.1 非 版 本 化 的 升级 


但 是 我 们 如 何 解 决 版 本 化 的 问题 ?通过 一 直 向 后 兼容 。 这 意味 着 我 们 必须 放弃 一 些 
野心 ， 比 如 清理 JavaScript : 我 们 不 能 引入 破坏 性 改变 。 向 后 兼容 意味 着 不 要 移 除 
特性 ， 也 不 要 修改 特性 。 原 则 是 :“ 不 要 破坏 Web”。 


然而 ， 我 们 可 以 添加 新 的 特性 ， 并 且 使 已 有 的 特性 更 加 强大 。 


因此 ， 对 于 新 的 引擎 不 需要 版 本 化 管理 了 ， 因 为 仍然 可 以 运行 老 的 代码 。 David 
Herman 称 这 种 避免 版 本 化 的 方法 

为 一 个 JavaScript ( one JavaScript(1JS) [1] ) ?， 因 为 它 使 JavaScript 
避免 分 成 几 种 不 同 的 版 本 或 模式 。 正 如 我 们 将 要 看 到 的 ， 由 于 严格 模式 ， 使 得 1JS 
其 至 移 除 了 一 些 已 有 的 分 裂 。 


一 个 JavaScript ( One JavaScript ) 不 是 说 你 必须 完全 放弃 语言 清理 。 你 可 以 引 
入 新 的 干净 的 特性 ， 而 不 是 清理 掉 已 有 的 特性 。 其 中 一 个 例子 就 是 let ， 它 声明 
了 块 级 范围 的 变量 ， 是 var 的 一 个 升级 版 本 。 它 并 不 取代 var ， 而 是 作为 高 
级 可 选项 一 直 和 var 并 存 。 


某 一 天 ， 甚 至 可 能 清除 掉 没 人 使 用 的 特性 。 一 些 ES6 特性 是 在 调查 过 Web 上 的 
JavaScript 代码 才 设 计 的 。 举 两 个 例子 : 


e@ let 声明 很 难 添 加 到 非 严 格 模式 ， 因 为 let 在 这 种 模式 下 是 保留 字 。 使 用 
let 关键 字 看 起 来 像 是 合法 ES5 代码 的 形式 是 : 


let[x] = arr; 


经 研究 得 出 ， 在 Web 上 没 人 以 这 种 方式 在 非 严 格 模式 下 使 用 变量 let 。 这 
使 得 TC39 将 let 添加 进 了 严格 模式 。 在 本 章 后 面 讲述 了 这 是 如 何 做 的 。 

e 函数 声明 确实 偶尔 会 在 非 严格 模式 下 的 代码 块 中 出 现 ， 这 就 是 为 什么 ES6 规 
范 描述 了 web 浏览 器 可 以 采用 的 措施 来 确保 这 样 的 代码 不 会 被 破坏 。 后 面 详细 
讲解 。 

下 一 章 描述 了 我 们 刚才 看 到 的 反面 : 部 署 ES6 ， 以 便 能 够 在 支持 ES6 的 引擎 上 运 
行 ， 也 能 够 在 不 支持 的 引擎 上 面 运行 。 


3.2 严格 模式 与 ECMAScript 6 


ECMAScript 5 引入 严格 模式 来 清理 语言 ， 在 文件 或 者 函数 的 第 一 行 放 入 下 面 的 内 
容 就 可 以 开局 严格 模式 : 


'use strict'; 


严格 模式 引入 了 三 种 破坏 性 的 改变 : 
@ 语法 改变 : 一 些 之 前 合法 的 语法 在 严格 模式 下 面 是 不 允许 的 。 例 如 : 


o 禁止 with 语句 。 它 允许 使 用 者 添加 任何 对 象 到 变量 作用 域 链 ， 这 会 减 
缓 程序 的 执行 速度 ， 并 且 很 难 指 出 某 个 变量 指向 哪里 。 
o 删除 一 个 独立 的 标识 符 (一 个 变量 ， 而 不 是 一 个 属性 ) 是 不 允许 的 。 
o。 函数 只 能 在 作用 域 的 顶层 声明 。 
o 更 多 的 保留 字 : implements interface let package private protected 
public static yield 。 
e@ 更 多 种 类 的 错误 。 例 如 : 


o 给 一 个 未 声明 的 变量 赋值 会 抛 出 ReferenceError 。 在 非 严格 模式 下 ， 
这 样 干 就 会 创建 一 个 全 局 变量 。 
o 修改 只 读 的 属性 (比如 字符 串 的 长 度 属 性 ) 会 抛 出 TypeError 。 在 非 
严格 模式 下 ， 不 会 产生 任何 效果 。 
@ 不 同 的 语义 : 在 严格 模式 下 ， 一 些 语 法 结构 表现 得 不 一 样 。 例 如 : 


o _ arguments 不 再 随 着 当前 参数 值 的 改变 而 改变 。 
o 在 非 方法 的 函数 中 this 是 undefined 。 在 非 严 格 模式 下 ， 它 指向 全 
局 对 象 ( window ) ， 也 就 是 说 如 果 调 用 一 个 构造 器 的 时 候 没 有 使 用 

new ， 就 会 创建 一 些 全 局 变量 。 


严格 模式 是 一 个 很 好 地 说 明了 版 本 化 是 未 手 的 : 即便 能 够 制作 一 个 干净 版 本 的 
JavaScript ， 也 很 难 被 大 家 接受 。 主 要 原因 是 破坏 了 一 些 现存 的 代码 ， 降 低 了 执行 
速度 ， 并 且 加 入 到 文件 中 也 很 麻烦 〈 更 不 用 说 交互 的 命令 行 ) 。 我 喜欢 严格 模式 这 
种 想法 ， 但 是 基本 不 使 用 。 


3.2.1 支持 松散 〈 非 严格 ) 模式 


一 个 JavaScript 意味 着 我 们 不 能 放弃 松散 模式 : 此 模式 将 会 继续 存在 (例如 在 
HTML 属性 中 ) 。 因 此 ， 我 们 不 能 基于 严格 模式 来 构建 ECMAScript 6 ， 必 须 同时 
在 严格 模式 和 非 严 格 模 式 (又 称 为 松散 模式 ) 下 添加 特性 。 否 则 ， 严 格 模式 就 会 成 
为 一 个 不 同 的 语言 版 本 ， 就 退回 了 版 本 化 的 方式 。 很 不 幸 ， 有 两 个 特性 很 难 引 入 松 
散 模 式 : let 声明 和 块 级 函数 声明 。 让 我 们 看 看 为 什么 很 难 引 入 和 如 何 引 入 。 


3.2.2 松散 模式 中 的 let 声明 


let 使 你 能 够 声明 块 级 变量 。 这 很 难 被 引入 到 松散 模式 ， 因 为 let 仅 在 严格 模 
式 下 是 保留 字 。 也 就 是 说 ， 下 面 两 条 语句 在 ES5 的 松散 模式 下 是 合法 的 : 


var let = [|]; 
let[x] = 'abc'; 


在 ECMASCript 6 的 严格 模式 下 ， 第 一 行 就 会 抛 出 异常 。 因 为 使 用 了 let 作为 变 
量 名 。 然 后 第 二 行 会 被 解析 为 一 个 let 变量 声明 (使 用 解构 ) 。 


在 ECMAScript 6 的 松散 模式 下 ， 第 一 行 不 会 抛 出 异常 ， 但 是 第 二 行 依然 被 解析 为 
一 个 let 声明 。 这 种 使 用 let 的 方式 在 Web 上 是 极 少见 的 ， 因 此 ES6 可 以 直 
接 这 样 来 解析 。ES5 松散 模式 下 的 其 他 let 声明 的 书写 方式 不 会 被 误解 : 


let foo = 123; 
Jet {x,y} = computeCoordinates(); 


3.2.3 松散 模式 下 的 块 级 函数 声明 


ECMAScript 5 严格 模式 禁止 在 块 中 声明 函数 ， 在 松散 模式 下 ， 规 范 却 允许 这 人 么 
做 ， 但 是 没 说 这 样 会 发 生 什 么 。 因此， 很 多 JavaScript 实现 都 支持 块 级 函数 声明 ， 
但 是 处 理 方式 是 不 一 样 的 。 


ECMAScript 6 想 要 块 中 的 函数 声明 本 地 化 ( 即 该 函数 的 作用 域 救 在 该 块 中 ) 。 作 
为 ES5 严格 模式 的 扩展 ， 这 是 没 问题 的 ， 但 是 破坏 了 一 些 松 散 模 式 的 代码 。 
此 ，ES6 为 浏览 器 提供 了 “Web 店 留 的 兼容 语义 "， 允许 块 中 的 函数 声明 在 函数 作 
用 域 中 存在 。 


3.2.4 其 它 关键 字 


标识 符 yield 和 static 仅 在 ES5 的 严格 模式 下 是 保留 字 。ECMAScript 6 使 
用 上 下 文 相 关 的 语法 规则 来 使 它们 在 松散 模式 下 起 作用 : 


。 在 松散 模式 下 ， yield 仅 在 生成 器 函数 中 是 保留 字 。 
e static 现在 仅 用 于 类 字面 量 中 ， 类 字面 中 默认 就 是 严格 的 ( 见 下 文 ) 。 


3.2.5 隐 式 的 严格 模式 


在 ECMAScript 6 中 ， 模 块 休 和 类 体 默 认 就 是 严格 模式 的 - 没 必 要 使 用 
use strict 标记 。 考 虑 到 我 们 所 有 的 代码 都 将 会 位 于 模块 中 ，ECMAScript 6 
有 效 地 将 整个 语言 升级 到 了 严格 模式 。 


其 它 结构 体 (比如 箭头 函数 和 生成 器 函数 ) 本 来 也 应 该 隐 式 地 为 严格 模式 。 但 是 考 
虑 到 通常 情况 下 这 些 结构 都 很 小 ， 在 非 严 格 模式 下 使 用 它们 就 会 造成 代码 中 两 种 模 
式 的 碎片 化 切换 。 类 ， 尤 其 是 模块 一 般 是 足够 大 的 ， 这 样 一 来 就 可 以 忽略 碎片 化 的 
代码 片段 问题 了 。 


3.2.6 无 法 修复 的 东西 
一 个 JavaScript 的 缺陷 就 是 无 法 修复 已 有 的 怪异 行为 ， 尤 其 是 下 面 这 两 个 。 


第 一 个 ， typeof null 应 该 返回 字符 串 null 而 不 是 object 。 但 是 修正 这 
个 就 会 破坏 已 有 的 代码 。 另 一 方面 ， 给 新 种 类 的 操作 数 添 加 新 的 操作 结果 是 没 问 题 
的 ， 因 为 当前 的 JavaScript 引擎 对 于 一 些 宿主 对 象 已 经 会 返回 自 定义 的 值 。 
ECMAScript 6 的 Symbol 就 是 一 个 例子 : 


> typeof Symbol.iterator 
"Symbol' 


第 二 个 ， 全 局 对 象 (浏览 器 中 的 window 对 象 ) 不 应 该 在 变量 作用 域 链 。 但 是 现 
在 修正 这 个 也 太 晚 了 。 但 是 至 少 ， 在 模块 中 不 会 处 于 全 局 作用 域 下 ， 并 且 let 永 
远 不 会 创建 全 局 对 象 属性 ， 其 至 在 全 局 作用 域 下 使 用 也 不 会 。 


3.3 总 结 


一 个 JavaScript 意思 就 是 使 ECMAScript 6 完全 地 向 后 兼容 ， 很 高 兴 这 获得 了 成 
功 。 尤 其 是 模块 隐 式 就 是 严格 模式 的 (这样 一 来 我 们 大 部 分 的 代码 都 会 处 于 严格 模 
TT) 2 


在 短期 内 ， 对 于 制定 ES6 规范 和 引擎 实现 来 说 ， 给 严格 模式 和 松散 模式 添加 ES6 
的 语法 结构 会 耗费 更 多 的 精力 。 从 长 远 来 看 ， 规 范 和 引擎 将 会 受益 于 语言 不 分 又 

(更 少 的 膨胀 等 等 ) 。 开 发 人 员 会 立即 从 一 个 JavaScript 中 获得 好 处 ， 因 为 开始 使 
用 ECMAScript 6 变 得 更 加 容易 。 


3.4 深入 阅读 


[1] 原始 的 1JS 提案 (警告 : 已 过 时 ) :“ES6 doesn't need opt-in ”， 作 者 
David Herman 。 


4 进入 ECMAScript 6 的 第 一 


本 章 帮 助 你 进入 ECMAScript 6 的 开发 : 


办 了 如 何 交 互 式 地 党 试 ES6 。 
出 了 易于 理解 的 ES6 特性 ， 顺 便 讲解 了 这 些 特性 在 ES5 中 如 何 实现 。 


4.1 尝试 ECMAScript 6 


有 三 种 简单 的 方式 来 玩 儿 ES6 : 


。1、web 浏览 器 : 使 用 在 线 的 Babel REPL ， 一 个 交互 式 的 工具 ， 能 六 
译 成 ES5 。 如 果 选 择 这 种 方式 的 话 就 什么 都 不 用 安装 。 

e。 2、 命令 行 :使 用 babel-node ， 一 个 Node.js 的 可 执行 版 本 ， 它 能 运行 
ES6 代码 (在 内 部 编译 成 ES5 ) 。 它 能 通过 npm 安装 。 

。 3、 各 个 JavaScript 引擎 : 参考 kangax 的 ES6 兼容 表格 ， 这 个 表格 能 查 出 
某 个 引擎 中 本 地 支持 哪些 ES6 特性 。 


后 续 将 会 更 详细 地 介绍 第 一 和 第 二 选项 。 


2 
ml 
(CI 
〇 ) 
党 


tr 


5 新 的 数值 和 Math 特性 


本 章 描 述 了 ECMAScript 6 的 新 的 数值 和 Math 特性 。 


5.1 概览 


现在 可 以 写 二 进 制 和 八进制 数值 字面 量 : 





> OxFF // ES5: hexadecimal 





255 
DERESORDTaTIY 
3 

>"O0lO0OW//A ES octad 
8 


全 局 对 象 Number 上 添加 了 一 些 新 的 属性 ， 尤 其 是 : 
e Number .EPSILON 用 于 比较 浮 点 数 ， 容 忍 舍 入 错误 。 
。 一 个 方法 和 常量 ， 用 于 判断 JavaScript 整数 是 否 安全 (在 有 符号 的 53 位 范围 
内 ， 没 有 精度 的 损失 ) 。 


5.2 新 的 整 型 字面 量 


ECMAScript 5 已 经 有 了 十 六 进 制 的 整 型 字面 量 : 


ECMAScript 6 引入 了 两 种 新 的 整 型 字面 量 : 
e 以 gb 或 09B 开头 的 二 进 制 字面 量 : 


> 0b11 
3 
> 0b100 
4 


以 90 或 90 开头 的 八进制 字面 量 (是 的 ， 就 是 一 个 零 后 加 大 写字 母 O ; 
使 用 第 一 种 小 写字 母 o 的 形式 也 是 可 以 的 ) 


007 


0010 


OV 和 AV 


记 住 方法 Number.prototype.toString(radix) 可 用 于 将 数值 转换 回来 : 


> (255).toString(16) 
ff 

> (4),toString(2) 
lOO 

> (8).toString(8) 
110 


5.2.1 八进制 字面 量 的 使 用 场景 : Unix 风格 的 文件 权限 


在 Node.js 的 文件 系统 模块 ， 有 几 个 函数 有 mode 参数 ， 用 于 指定 文件 权限 ，via 
an encoding that is a holdover from Unix : 


e@ 权限 被 指定 给 三 种 用 户 : 
o 用 户 : 文件 拥有 者 
o 组 : 跟 文 件 相 关 的 组 成 员 
o 所 有 : 其 余 用 户 
e。 每 一 种 用 户 ， 都 可 以 被 授予 下 列 权 限 : 
or (read ) : 此 种 用 户 人 允许 读 文件 
o W (write ) :此 种 用 户 允 许 改 变 文 件 
o Xx ( execute ) : 此 种 用 户 人 允许 运行 文件 


这 意味 着 权限 可 以 通过 9 位 来 表示 〈3 种 用 户 ， 每 种 用 户 有 三 种 权限 ) 


用 户 组 所 有 
权限 『，W ，X 『，W ，X r，W，X 
位 (Bit ) 8，7，6 S543 2 |» 0 


某 一 种 类 型 的 用 户 的 权限 值 占 3 位 : 


位 权限 八进制 数字 


000 --- 0 
001 --X 1 
010 -W- 2 
011 -WX 3 
100 r-- 4 
101 『-X 5 
110 rwW- 6 
111 rwWX 


这 表明 八进制 数 很 适合 用 来 代表 所 有 权限 ， 仅 需要 3 个 数字 ， 每 个 数字 代表 一 种 用 
户 的 权限 。 两 个 例子 : 


e 755 = 111,101,101 : 我 可 以 修改 ， 读 取 和 执行 ; 其 他 所 有 人 只 能 读 取 和 执行 。 
e。 640 = 110,100,000 : 我 可 以 读 取 和 写 入 ; 组 成 员 可 以 读 取 ; 其 余 用 户 根本 不 能 
获取 。 


5.2.2 parseInt() 和 新 的 整 型 字面 量 
parseInt() 有 如 下 声明 : 


parseInt(string, radix?) 


它 对 十 六 进 制 字 面 量 提供 了 特殊 的 支持 - 当 满足 下 述 条 件 的 时 候 ， string 参数 
的 gx (或 9X ) 前 缓 会 被 移 除 : 


@ 未 传递 radix 参数 或 者 该 参数 为 0， 此 时 radix 被 设 为 16。 
e 传递 radix 并 为 16。 


例如 : 


> parseInt( 0XxFF ' ) 

55 

> parseInt('QOxFF', 0) 
255 

> parseInt('OxFF", 16) 
255 


在 所 有 其 他 情形 下 ， 数 字 一 直 解 析 到 第 一 个 非 数 字 的 地 方 : 


> parseInt( 9xFFE' 10) 
0 
> parsernt( 90xFEFE ATLZ ) 
0 


parseInt() 并 没有 对 八进制 或 二 进 制 字面 量 特殊 支持 ! 


parseInt( “OQbi11") 
parseTnt( 0b11 2) 


parseFnt( 人 TID 2) 


<“JEVCVOOV 


parseInt( '0010 ' ) 
parseInt('0010', 8) 


parseInt('10', 8) 


OVOVOYV 


如 果 想 解析 这 种 字面 量 ， 应 该 使 用 Number() 


Number ('0b111°') 


Number('0010') 


oo VNRV 


或 者 ， 也 可 以 移 除 前 级 ， 然 后 使 用 parseInt() ， 传 入 适当 的 radix 参数 : 


paicsemn 人 全 TO 2) 


> 
7 
> parseInt('10"'. 8) 
8 


5.3 新 的 静态 Number 类 属性 
本 节 叙 述 了 ECMAScript 6 中 添加 的 构造 器 Number 上 的 新 属性 。 


5.3.1 预定 义 的 全 局 函数 


四 个 数值 相关 的 全 局 函数 已 经 添加 到 Number 下面 了 ， 这 些 方法 是 : 
isFinite 和 isNaN ， parseFloat 和 parseInt 。 所 有 方法 都 表现 得 基 
本 跟 对 应 的 全 局 函数 一 样 ， 但 是 isFinite 和 isNaN 不 需要 它们 的 参数 是 数 
字 。 下 述 子 章节 解释 了 所 有 细节 。 


5.3.1.1 Number.isFinite(number) 


number 有 是否 是 一 个 真正 的 数字 (不 为 ”Infinity 或 ” -Infinity 或 NaN 
) ? 


> Number .IsFinite(Infinity) 
false 

> Number .IsFinite(-Infinity ) 
false 

> Number .IsFinite(NaN ) 

false 

> Number .isFinite(123) 

true 


该 方法 的 优点 是 它 并 不 需要 它 的 参数 是 数字 (全 局 的 那个 函数 需要 ) 


> Number .IsFinite( '123  ) 
false 

>TISETTTEe 人 本 2 

true 


5.3.1.2 Number .isNaN(number) 


number 是 否 为 NaN ?通过 === 来 检查 是 奇 巧 淫 技 。NaN 是 唯一 一 个 自己 不 
等 于 自己 的 值 : 


> let x = NaN; 
> X === NaN 
false 


因此 ， 下 述 表达 式 用 于 检查 是 否 为 ”NaN 


> XX 
true 


使 用 Number.isNaN() 具有 更 强 的 自我 描述 力 : 


> Numpber .isNaN(x) 
true 


Number .isNaN() 也 不 需要 它 的 参数 是 数字 (全 局 的 那个 函数 需要 ) 


> Number .isNaN('??7?') 
false 

> isNaN('???') 

Crue 


5.3.1.3 Number.parseFloat 和 Number.parseInt 


下 面 两 个 方法 和 全 局 的 同名 水 数 效果 一 样 。 由 于 完整 性 的 元 婴 ， 它 们 被 添加 到 
Number 上 ;现在 ， 所 有 数字 相关 的 函数 都 在 Number 上 了 。 


e Number.parseFloat(string) 
e Number.parseInt(string, radix) 


5.3.2 Number.EPSILON 


舍 入 误差 在 JavaScript 中 是 一 个 问题 ， 尤 其 是 十 进 制 小 数 。 例 如 ，0.1 和 0.2 可 以 被 
精确 地 描述 ， 如 果 两 者 相 加 ， 并 和 0.3 比 较 ， 会 有 如 下 结果 : 


之 有 和 2 三 三 三 让 0R 3 
false 


在 比较 浮 点 数 的 时 候 ， Number .EPSILON 指定 了 一 个 合理 的 误差 范围 。 它 提供 了 
一 种 更 好 的 方式 来 比较 浮 点 数值 ， 就 像 如 下 函数 所 示 : 


function epsEqu(x, y) { 
return Math.abs(x - y) < Number.EPSILON; 


} 
console.log(epsEqu(0.1+0.2, 0.3)); // true 


5.3.3 Number .isInteger (number ) 
JavaScript 仅 有 浮 点 数 ( 双 精 度 ) 。 相 应 的 ， 整 数 是 简单 的 没有 小 数 部 分 的 浮 点 
数 。 


如 果 number 是 数字 并 且 没 有 小 数 部 分 ， 则 Number .isInteger(number) 返回 
true 。 


> Number .IsInteger(-17) 
true 

> Number .isInteger(33) 
EUe 

> Number .IsInteger(33.1) 
false 

> Number.isInteger('33') 
false 

> Number .IsInteger(NaN ) 
false 

> Number .IsInteger(Infinity ) 
false 


5.3.4 安全 整数 


:98Sorit 间 存 放 53 位 有 符号 整数 。 也 就 是 说 ， 在 范围 -253 < j < 
之 间 的 整数 | 是 安全 的 。 先 暂时 解释 这 完 竟 意味 着 什么 。 下 面 的 属性 帮助 判断 
和 个 JavaScript 整 & 数 是 否 是 安全 的 


e Number.1IsSafeInterger(number ) 
e Number.MIN SAFE INTEGER 
e Number.MAX SAFE INTEGER 


先 拿 到 整数 的 概念 重点 在 于 数学 上 的 整数 在 JavaScript 中 如 何 展 示 。 在 范围 (-253 ， 
2 ) (除去 上 下 边界 ) 中 ，JavaScript 整数 是 安全 的 : 要 展示 的 数学 上 的 整数 和 
范围 中 的 整数 是 一 一 对 应 的 。 


超过 这 个 范围 ， JavaScript 整数 就 不 窑 全 了 : 两 个 或 者 多 个 数学 上 的 整数 使 用 同一 
个 JavaScript 整数 来 表示 。 例 如 ， 从 2 3 开始 ，JavaScript 仅 能 表示 数学 上 的 偶 
数 : 


> Math.pow(2, 53) 
9007199254740992 


> 9007199254740992 
9007199254740992 
> 9007199254740993 
9007199254740992 
> 9007199254740994 
9007199254740994 
> 9007199254740995 
9007199254740996 
> 9007199254740996 
9007199254740996 
> 9007199254740997 
9007199254740996 


因此 ， 安 全 整数 能 够 明确 代表 某 一 个 数学 上 的 整数 。 


5.3.4.1 Number 上 跟 安 全 整数 相关 的 静态 属性 


这 两 个 静态 的 ” Number 属性 指定 了 安全 整数 的 上 下 边界 ， 可 能 像 如 下 所 示 的 方式 
定义 : 


Number ,MAX_SAFE_INTEGER 
Numpber ,MIN_SAFE_INTEGER 


Math.pow(2, 53)-1; 
-Number ,MAX_SAFE_INTEGER ， 


Number .isSafeInteger() 用 于 判定 一 个 JavaScript 数字 是 否 是 安全 整数 ， 可 以 
这 样 来 定义 该 方法 : 


Number ,IsSafeInteger = function (n) { 
return (typeof n === 'number' && 
Math.round(n) === n && 
Number .MIN_SAFE_ INTEGER <= n && 
n <= Number.MAX_ SAFE_ INTEGER); 


对 于 给 定 的 值 hn， 该 函数 首先 检查 n 是 否 是 数字 和 整数 。 如 果 两 次 检查 都 通过 
了 ， 并 且 n 大 于 等 于 MIN SAFE INTEGER ， 小 于 等 于 MAX_SAFE_INTEGER 
， 那么 n 就 是 安全 的 。 


5.3.4.2 什么 时 候 整 数 运算 是 正确 的 ? 
如 何 确 定 整数 运算 的 结果 是 正确 的 ?例如 ， 下 面 的 结果 明显 不 对 : 


>°9007199254740990 +3 
9007199254740992 


两 个 操作 数 都 是 安全 的 ， 但 是 得 到 了 一 个 不 安全 的 结果 : 


> Number ,IsSafeInteger(9007199254740990 ) 
true 

> Number ,IsSafeInteger(3) 

EUG 

> Number.isSafeInteger(9007199254740992) 
false 


下 面 的 结果 依然 不 正确 : 


> 9007199254740995 - 10 
9007199254740986 


这 次 ， 结 果 是 安全 的 ， 但 是 其 中 一 个 操作 数 不 安 全 : 


> Number.isSafeInteger (9007199254740995) 
false 

> Number .isSafeInteger(10) 

Cnue 

> Number .isSafeInteger (9007199254740986) 
true 


因此 ， 对 整数 应 用 操作 符 op ， 仅 当 所 有 操作 数 和 结果 是 安全 的 ， 才 能 确保 结果 
是 正确 的 。 更 正式 地 : 


isSafeInteger(a) && isSafeInteger(b) && isSafeInteger(a op b) 


意味 着 a op b 能 得 到 正确 的 结果 。 


本 节 来 源 “Clarify integer and safe integer resolution”，Mark S. Miller 发 送 给 
es 讨论 邮件 列表 。 


5.4 Math 
ECMAScript 6 中 的 全 局 对 象 Math 有 一 个 新 的 方法 。 
5.4.1 各 种 各 样 的 数值 函数 


5.4.1.1 Math.sign(x) 
返回 x 的 符号 ，-1 或 +1。 如 果 x 是 NaN 或 者 零 ， 则 返回 X。 
> Math.sign(-8) 


> Math.sign(3) 


> Math.sign(0) 


> Math.sign(NaN) 


> Math.sign(-Infinity) 


> Math.sign(Infinity) 


5 新 的 数值 和 Math 特性 
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6 新 的 字符 串 特性 


本 章 履 盖 了 ECMAScript 6 中 字符 串 所 有 的 新 特性 。 


6.1 概览 


6.1 概览 
新 的 字符 串 方法 : 


> 'hello'.startswith('hell') 


true 

> "hello' ,endswWith(' el11o ') 
true 

> 'hello'.includes('ell') 
true 


> 'doo '.repeat(3) 
'doo doo doo ' 


ES6 有 一 种 新 的 字符 串 字 面 量 ， 模 板 字面 量 : 


// String interpolation via template literals (in backticks) 
let first = 'Jane'; 
let last = 'Doe'; 
console iog( Hellon oerimsth slash 
// Hello Jane Doe! 


// Template literals also let you create strings with multiple 1 
ines 

let multiLine = ~ 

This is 

a string 

with multiple 

lines ，; 
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6.2 Unicode 码 点 解析 


在 ECMAScript 6 中， 存在 一 种 新 的 Unicode 码 点 解析 方式 : 能 够 指定 任何 编码 方 
式 (即便 这 种 编码 方式 超过 了 16 位 ) 


console.1log('\u{1F680}"); /ESOR Nb 
console.log('\uD83D\UuDE80'); // ES5: 两 个 码 点 单元 


本 章 关 于 Unicode 的 部 分 展示 了 更 多 信息 。 


Wh 


6.3 字符 串 插 值 ， 多 行 字 符 串 字面 量 和 原始 字符 串 字面 


里 


模板 字面 量 有 专门 的 章节 深入 讲述 ， 其 提供 了 三 种 有 意思 的 特性 。 
首先 ， 模 板 字 面 量 支 持 字 符 串 插值 : 


const first = 'Jane'; 

const last = 'Doe'; 

console log( Hello $first} (Lasty 
// Hello Jane Doe! 


其 次 ， 模 板 字 面 量 可 以 跨 多 行 : 


const multiLine = 
This is 

a string 

with multiple 
lines ，; 


最 后 ， 如 果 在 模板 字面 量 前 面 加 上 标签 ” String.raw ， 那 么 就 变 成 了 “原生 的 "的 
字符 串 了 ， 反 斜 杠 再 也 不 是 用 于 转 义 的 特殊 字符 ， 也 就 是 说 ， An 不 会 转 义 成 换 
行 符 : 


const str = String.raw Not a newline: Xn ， 
console.log(str === 'Not a newline: \\n'); // true 


6.4 字符 串 遍 历 


字符 串 是 可 遍历 的 ， 也 就 是 说 可 以 使 用 for-of 


如 


fore(const ehnofm abc of 
console.log(ch); 


全 URDU 


// a 
Ab 


也 可 以 使 用 扩展 操作 符 (...) 将 字符 串 转 换 成 数组 : 


conse charnse = abeu le 
p27 au UD yu 


6.4.1 字符 串 人 遍历 遵循 Unicode 码 点 规则 


字符 串 壳 历 的 时 候 ， 分 割 字 符 串 是 按照 码 点 边界 来 的 ， 
字符 可 能 由 一 个 或 者 两 个 JavaScript 字符 组 成 : 


for (const ch of 'XxNXuD83DNXuDE80y ' ) { 
console.log(ch.1length); 
} 


// Output 
/ pe 1 
YN 2 
hdl 


6.4.2 计算 码 点 数 


遍历 是 一 种 快速 计算 字符 串 Unicode 码 点 数 的 方式 : 


> [,.,.,'xNXuD83DXuDE80y ' ] .Jength 
3 


6.4.3 翻转 包含 非 BMP 码 点 的 字符 囊 


遍历 字符 串 中 的 


意味 着 


态 > A 大 


字符 : 


遍历 的 时 候 拿 到 的 


利用 遍历 也 能 够 实现 翻转 包含 非 BMP 码 点 ( 比 16 位 大 ， 用 两 个 JavaScript 字符 编 


码 ) 的 字符 囊 : 


6.4 字符 串 遍 历 


const Str = 'XNXuD83DNuDE80y ' ， 


A/ ES5:N\UD83DNUDE80Ware (incorrectly) reversed 
console.log(str.split('').reverse().join('')); 
// 'y\UDE80\uD83Dx' 


// ES6: order of XuD83DXuDE80 is preserved 


console.log([...str]j.reverse().jJoin('')); 
// :YNXuD83DXUDE80X， 


在 火狐 浏览 器 中 的 翻转 结果 : 


遗留 问题 : 合并 标记 一 个 合并 标记 就 是 两 个 Unicode 码 点 的 序列 ， 用 于 展示 单 


个 符号 。 我 在 这 里 展示 的 ES6 翻转 非 BMP 码 点 的 方法 ， 不 适用 于 合并 标记 。 
对 于 合并 标记 的 翻转 ， 你 需要 一 个 库 ， 例 如 Mathias Bynens 的 Esrever 。 
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6.5 码 点 的 数字 值 
新 方法 codePointAt() 返回 字符 串 中 指定 字符 的 数字 值 : 


const str = 'x\uD83D\uDE80y'; 
console.log(str.codePointAt(0).toSstring(16)); // 78 
console.log(str.codePointAt(1).toString(16)); // 1f680 
console.log(str.codePointAt(3).toString(16)); // 79 


该 方法 在 字符 串 人 遍历 中 也 能 正确 执行 


for (const ch of 'x\uD83D\uDE80y') { 
console.log(ch.codePointAt(0).toString(16)); 
} 


/OU 
A178 

// 1f680 
// 79 


与 codePointAt() 对 应 的 方法 是 String.fromCodePoint() 


> String.fromCodePoint (Ox78, QOx1if680, QOx79) === 'XNXuD83DNXuUDE80y 
true 


6.6 检查 子囊 
有 三 个 方法 用 于 检查 某 个 字符 串 是 否 是 另 一 个 字符 囊 的 子囊 : 


> 'hello'.startswith('hell') 


true 

> 'hello' .endswith('ello') 
true 

> 'hello'.includes('ell') 
true 


每 个 方法 都 有 可 选 的 第 二 个 参数 ， 用 于 指定 字符 串 搜 索 的 开始 或 者 结束 位 置 : 


> 'hello'.startswith('ello', 1) 
true 

> 'hello' .endswith('hell', 4) 
true 


> 'hello'.includes('ell', 1) 
true 
> 'hello'.includes('ell', 2) 
false 


6.7 重复 字符 串 
repeat() 方法 用 于 生成 重复 字符 串 : 


> 'doo " .repeat(3) 
'doo doo doo ' 


6.8 用 正则 表达 式 作 为 参数 的 字符 串 方 法 


在 ES6 中 ， 四 个 用 正则 表达 式 作 为 参数 的 字符 串 方 法 做 的 事情 相当 少 ， 它 们 主要 
调用 参数 上 面 的 方法 : 


String.prototype ,match(regexp) 调用 
regexp[Symbol.match](this) 。 
String.prototype,replace(searchvalue，replaceVvalue) 调用 
searchValue[Symbol.replacel(this, replaceVvalue) 。 
String.prototype.search(regexp) 调用 
regexp[Symbol.search]|(this) 。: 
String.prototype.split(separator，1limit) 调用 
separator[Symbol.split](this, limit) 。 


这 些 参数 根本 不 需要 是 正则 表达 式 ， 任 何 带 有 相应 方法 的 对 象 都 可 以 作为 参数 。 


6.9 备 忘 : 新 的 字符 串 方法 
标签 模板 : 
e String.raw(callSite, ...substitutions) : string 
用 于 获取 “原始 "字符 串 内 容 的 模板 标签 ( 反 斜 杠 不 再 是 转 义 字符 ) 


> String.raw \ === AN 
true 


更 多 内 容 可 阅读 关于 模板 字面 量 的 章节 。 
Unicode 和 码 点 : 
e String.fromCodePoint(...codePoints : number[]) : string 
将 数字 值 转换 成 Unicode 码 点 字 ， 然 后 返回 由 码 点 构成 的 字符 串 。 
e String.prototype.codePointAt(pos) : number 


返回 在 从 位 置 pos 处 开始 的 码 点 的 数字 值 (由 一 个 或 者 两 个 JavaScript 字 
符 组 成 ) 。 
e String.prototype.normalize(form? : string) : string 
不 同 的 码 点 组 合 可 能 看 起 来 是 一 样 的 。 Unicode 标准 化 将 它们 修正 为 相同 的 
标准 值 。 这 对 相等 比较 和 字符 串 搜 索 很 有 帮助 。 对 于 一 般 的 文本 ， 建 议 使 用 
NFC 形式 。 
查找 字符 串 : 
e String.prototype.startsWith(searchString, position=0) : boolean 
position 参数 指定 了 字符 串 的 开始 搜索 位 置 。 


e String.prototype.endsWith(searchString, endPosition=searchsString.length) : 
boolean 


endPosition 指定 了 字符 串 的 结束 搜索 位 置 。 
e String.prototype.includes(searchString, position=0) : boolean 
从 字符 串 position 位 置 开 始 搜索 ， 是 否 包含 searchstring 子 串 。 
重复 字符 串 : 
e String.prototype.repeat(count) : string 


返回 重复 指定 次 数 的 字符 串 。 


6.9 备 忘 : 新 的 字符 串 方法 
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7 Symbol 


Symbol 是 ECMAScript 6 中 一 个 新 的 原始 类 型 ， 本 章 讲解 了 它 的 工作 原理 。 


7.1 概览 


7.1.1 用 途 1 : 唯一 属性 键 


Symbol 主要 用 作 唯 一 属性 键 - 一 个 symbol 对 象 不 会 与 任何 其 他 属性 键 〈 另 一 个 
Symbol 对 象 或 者 字符 串 ) 冲突 。 例 如 ， 你 可 以 将 Symbol.iterator 作为 某 个 对 
象 的 键 〈 键 值 是 一 个 方法 ) ， 使 其 变 得 可 和 迭代 (可 以 通过 for-of 或 者 其 他 语言 
机 制 来 迭代 ， 更 多 相关 内 容 可 以 在 有 关 选 代 的 章节 找到 ) 


const iterableObject = { 
[Symbol.iterator]() { // (A) 
const data = ['hello', ‘'world']; 
let index = 0; 
return { 
next() { 
if (index < data.length) { 
return { value: data[index++] }; 
} else { 
return { done: true }; 
} 


} 
}; 
} 
} 
for (const x of iterableObject) { 
console.1log(x); 


// Output: 
// hello 
// world 


在 行人 A 处 ，symbol 对 象 用 作 键 ， 键 值 是 一 个 方法 。 这 个 唯一 的 键 使 得 该 对 象 可 迁 
代 ， 可 用 于 for-of 循环 。 


7.1.2 用 途 2 : 用 常量 代表 特殊 的 含义 


在 ECMAScript 5 中 ， 你 可 能 会 使 用 字符 串 来 表示 一 些 特殊 的 含义 ， 比 如 颜色 。 在 
ES6 中 ， 可 以 使 用 symbol ， 因 为 symbol 总 是 唯一 的 : 


const COLOR_RED 
const COLOR_ORANGE 
const COLOR_YELLOW 
const COLOR_GREEN 
const COLOR_BLUE 
const COLOR_VIOLET 


SymbolL('Red ' ) ， 
Symbol('orange ' ) ， 
Symbol('Yellow' ) ， 
Symbol(' Green ' ) ; 
SymbolL( Blue ' ) ， 
Symbol( Violet ); 


function getComplement(color) { 
Switch (color) { 
case COLOR_ RED: 
return COLOR_GREEN ， 
case COLOR_ORANGE : 
return COLOR_BLUE ， 
case COLOR_YELLOW : 
return COLOR_VIOLET ， 
case COLOR_GREEN : 
return COLOR_RED ; 
case COLOR_ BLUE: 
return COLOR_ORANGE ， 
case COLOR_VIOLET : 
return COLOR_YELLOW 
default: 
throw new Exception('Unknown color: 


7.1.3 陷阱 : 不 能 将 symbol 强制 转换 成 字符 串 
将 Symbol 强制 ( 隐 式 地 ) 转换 成 字符 串 会 抛 出 异常 : 


const sym = Symbol('desc ' ) ， 


consee oul 
CONSH Sn2 


SyYm/ATIY eeErnmror 
‘${sym} ; // TypeError 


只 能 通过 显示 的 方式 转换 : 


String(sym); // "Symbol(desc )， 
sym.toSstring(); // "Symbol(desc) 


const str2 
const str3 


禁止 强制 转换 能 够 避免 一 些 错 误 ， 但 是 也 使 得 symbol 的 使 用 变 得 


7.1.4 哪些 跟 属性 相关 的 操作 能 感知 到 symbol 键 ? 


下 面 的 操作 能 感知 到 symbol 键 : 


ee Reflect.ownKeys() 
e@ 通过 [] 访问 属性 
e Object.assign() 


下 面 的 操作 会 忽略 掉 symbol 键 : 


e Object.keys() 
e Object.getOwnPropertyNames() 
e for-in 循环 


7.2 新 的 原始 类 型 


ECMAScript 6 引入 了 一 种 新 的 原始 类 型 : Symbol 。 它 能 被 用 作 唯 一 标识 的 ID 。 
通过 工厂 方法 Symbol() 来 创建 symbol 对 象 (这 跟 String 方法 返回 字符 串 很 类 
似 ) : 


const Symbol1 = Symbol() ， 


Symbol1() 有 一 个 可 选 的 字符 串 参 数 ， 用 作 新 创建 的 symbol 对 象 的 一 个 描述 文 
本 。 该 文本 在 symbol 被 转换 为 字符 串 〈 通 过 toString() 或 者 String() ) 
的 时 候 用 到 : 


> const Symbol2 = Symbol( "Symbol12 ' ) ; 
> String(symbol2) 
"Symbol(symbol12 )， 


Symbol() 方法 返回 的 每 一 个 symbol 实例 都 是 唯一 的 ， 每 一 个 Symbol 对 象 都 有 
自己 的 标识 : 


> Symbol() === Symbol() 
false 


如 果 你 用 typeof 来 检测 symbol 对 象 ， 会 发 现 symbol 是 原始 类 型 ， 因 为 返回 值 
是 一 种 新 的 特定 于 symbol 对 象 的 类 型 : 


> typeof Symbol( ) 

'symbol' 
7.2.1 用 作 属 性 键 的 symbol 
symbol 可 以 用 作 属 性 键 : 


const MY_KEY = Symbol() ， 
const obj = {}; 


obj[MY_KEY] = 123; 
console.log(obj[MY_KEY]); // 123 


类 和 对 象 字面 量 有 一 个 叫做 计算 属性 键 的 特性 : 你 可 以 用 一 个 表达 式 来 指定 属性 
键 ， 将 表达 式 放置 在 中 括号 里 面 。 如 下 的 对 象 字 面 量 ， 使 用 了 计算 属性 键 的 方式 ， 
让 MY _KEY 成 为 了 键 。 


const MY_KEY = Symbol(); 
const obj = { 
[MY_KEY] : 123 


计算 键 同样 适用 于 方法 定义 : 


const FO0 = Symbol(); 
const obj = 


[Fo0]() { 


return 'bar'; 
} 
}; 


console.log(obj[F00]()); // bar 


7.2.2 枚 举 自 有 属性 键 


鉴于 现在 有 一 种 新 的 可 以 用 作 属 性 键 的 值 了 ， 那 么 ECMAScript 6 中 就 产生 了 新 的 
术语 : 


。 属性 键 要 么 是 字符 囊 ， 要 么 是 symbol 对 象 。 
。 字 符 串 形式 的 属性 键 叫做 属性 名 字 。 
e。 Symbol 对 象形 式 的 属性 键 叫 做 属性 Symbol 。 


我 们 先 创 建 一 个 对 象 ， 然 后 用 这 个 对 象 来 验证 新 的 自 有 属性 枚 举 API。 


const obj = { 
[Symbol('my_key')]: 1, 
enum: 2, 
nonEnum: 3 
}; 
Object.defineProperty(obj, 
'nonEnum', { enumerable: false }); 


0bject.getOwnPropertyNames() 忽略 symbol 形式 的 属性 键 : 


> 0bject ,getownPropertyNames(obj ) 
['enum', "nonEnum ' ] 


Object.getownPropertySymbols() 忽略 字符 串 形 式 的 属性 键 : 


> Object.getownPropertySymbols(obj ) 
[SymbolL(my_Kkey)] 


Reflect.ownKeys() 返回 所 有 类 型 的 键 : 


> RefJlect .ownkKkeys(obj ) 
[Symbol(my_key)， 'enum', 'nonEnum ' ] 


0bject,keys() 仅 返 回 可 枚 举 的 字符 串 属 性 : 


> 0bject.keys(obj ) 
['enum'] 


Object.keys 这 个 名 字 与 新 术语 ( 仅 列举 字符 串 类 型 的 键 ) 冲突 了 。 现 在 ， 
Object,names 或 者 0bject,getEnumerableownPropertyNames 会 是 更 好 的 
选择 。 


7.3 使 用 Symbol 来 表达 一 些 概念 


在 ECMAScript 5 中 ， 


实现 的 。 例 如 : 


Var COLOR_RED 
Var COLOR_ORANGE 
Var COLOR_YELLOW 
Var COLOR_GREEN 
Var COLOR_BLUE 
Var COLOR_VIOLET 


Red ' ， 
Orange 
'Yellow'; 
'Green'; 
Bllue ee. 
'Violet'; 


一 种 常用 的 表达 特殊 含义 ( 想 想 枚 举 常 


量 ) 是 通过 


然而 ， 字 符 串 并 不 是 我 们 想象 中 的 那么 具有 唯一 性 。 为 什么 呢 ?请 看 如 下 函数 。 


function getComplement(color) { 
Switch (color) { 
case COLOR_RED : 


return COLOR_GREEN ; 


case COLOR_ORANGE : 


return COLOR_BLUE ， 


case COLOR_ YELLOW: 


return COLOR_VIOLET, 


case COLOR_GREEN : 


return COLOR_RED ， 


case COLOR_ BLUE: 


return COLOR_ORANGE ， 


case COLOR_VIOLET : 


return COLOR_YELLOW 


default: 


throw new Exception('Unknown color: 


"二 COLOr ); 


很 明显 ， 你 可 以 使 用 任何 表达 式 作为 ”switch case 中 的 表达 式 ， 并 不 局 限于 某 


种 形式 。 例 如 : 


function isThree(x) { 
switch (x) { 
case 1+1+1: 


return true; 


default: 


return false; 


我 们 使 用 了 switch 提供 的 便利 ， 用 常量 来 指 代 颜 色 ( COLOR_RED 等 等 ) ， 而 
不 是 使 用 硬 编码 的 方式 ( ' RED ' 等 ) 。 


有 趣 的 是 ， 即 便 我 们 使 用 了 常量 ， 还 是 会 产生 混 消 。 例 如 ， 某 个 人 可 能 随手 定义 一 
个 常量 : 


Var MOOD_BLUE = :BLUE ' ， 


现在 ， BLUE 值 再 也 不 是 唯一 的 了 ， MOOD_BLUE 与 其 冲突 了 。 如 果 将 它 作为 
getcomplement() 的 参数 ， 原 本 期 望 能 抛 出 异常 ， 结 果 却 返回 了 'ORANGE' 。 


让 我 们 使 用 Symbol 来 解决 这 个 问题 。 现 在 ， 我 们 同样 能 够 使 用 ES6 的 const 
特性 ， 这 样 就 可 以 声明 缆 正 的 常量 了 〈 不 能 改变 常量 的 指向 ， 但 是 值 本 身 可 能 是 可 
变 的 ) 。 


const COLOR_ RED 
const COLOR_ ORANGE 
const COLOR_ YELLOW 
const COLOR_GREEN 
const COLOR_ BLUE 
const COLOR _ VIOLET 


Symbol( -Red  ) ， 
Symbol('orange ' ) ， 
Symbol( Yellow ' 六 
SymbolL( ' Green ' ) ， 
Symbol( Blue -六 
Symbol( Violet  ) 


Symbol 返回 的 每 一 个 值 都 是 唯一 的 ， 这 就 是 为 什么 没有 其 他 的 值 可 以 和 BLUE 发 
生 冲 突 的 原因 。 有 趣 的 是 ， 如 果 我 们 使 用 symbol 对 象 替 换 字 符 串 ， 并 不 需要 改动 
getComplement() 函数 ， 这 表明 两 种 方案 的 代码 是 多 么 的 相似 。 


7.4 Symbol 作为 属性 键 


创建 永远 不 会 冲突 的 键 ， 在 以 下 两 种 场景 中 非常 有 用 : 


e 在 继承 树 中 定义 非 公开 的 属性 。 
e 保证 子 层 属性 不 会 和 父 层 属性 冲突 。 


7.4.1 Symbol 用 作 非 公开 属性 键 


无 论 何 种 形式 的 JavaScript 继承 (例如 通过 类 ， 通 过 mixin ， 或 者 就 是 单纯 的 原型 
的 方式 ) ， 都 会 存在 两 种 类 型 的 属性 : 


。 公开 属性 能 被 客户 代码 访问 。 
e@ 私有 属性 在 组 成 继承 结构 的 代码 片段 (例如 类 、mixin 或 者 对 象 ) 内 部 使 用 。 
( 受 保护 的 属性 被 若干 个 代码 片段 共享 ， 和 私有 属性 面临 同样 的 问题 。) 


为 了 可 用 性 的 缘故 ， 公 开 属 性 通常 用 字符 串 作 为 键 。 但 是 ， 对 于 字符 串 作 为 键 的 私 
有 属性 ， 意 外 的 命名 冲突 可 能 会 导致 一 些 问 题 。 因 此 ，Ssymbol 是 一 个 好 的 选择 。 
例如 ， 在 下 面 的 代码 中 ，symbol 用 于 私有 属性 counter 和 action 。 


const _counter = Symbol('counter'); 
const _action = Symbol('action'); 
class Countdown { 
constructor(counter, action) { 
this[_counter] = counter; 
this[_action|] = action,; 


} 

dec() { 
let counter = this[_counter]; 
if (counter < 1) return; 
counter--; 
this[_counter] = counter; 
If (counter === 0) { 

this[_action](); 

} 


注意 Symbol 仅 会 使 你 免 于 命名 冲突 ， 并 不 会 阻止 未 授权 的 属性 访问 ， 因 为 可 以 通 
过 Reflect.ownKeys() 找 出 对 象 所 有 自 有 属性 键 ， 包 括 symbol 。 如 果 你 想 对 
属性 做 保护 ， 可 以 选择 在 这 一 节 中 讲述 的 方法 之 一 : 类 的 私有 数据 。 


7.4.2 Symbol 用 作 元 级 属性 键 


相对 于 “普通 的 "属性 键 ，Symbol 的 唯一 性 使 其 在 一 个 不 同 的 纬度 成 为 理想 的 公开 属 
性 ， 因 为 元 级 键 和 普通 键 不 能 冲突 。 举 个 元 级 键 的 例子 ， 对 象 可 以 实现 一 些 特定 的 
方法 ， 从 而 自 定义 某 个 库 如 何 处 理 该 对 象 。 使 用 Symbol 键 可 以 避免 第 三 方 库 错 误 
地 将 普通 方法 当成 自 定义 方法 。 

ECMAScript 6 中 的 可 迭代 性 就 属于 这 种 自 定义 方法 的 场景 。 如 果 一 个 对 象 有 一 个 
键 为 Symbol.iterator 的 方法 ， 那 么 它 就 是 可 迭代 的 。 在 下 面 的 例子 中 ， obj 


是 可 迭代 的 。 


constroban=—t 
data: [ 'hello', ‘'world' ], 


[Symbol.iterator]() { 
const self = this; 
let index = 0; 
return { 


next() { 
If (index < self.data.length) { 


return { 
value: self.data[index++] 


}; 
} else { 

return { done: true }; 
} 


} 
}; 
} 
jp 


obj 的 可 迭代 性 使 其 可 用 于 for-of 循环 ， 以 及 类 似 的 JavaScript 特性 中 : 


for (const x of obj) { 
console.1log(x); 


} 
// Output: 


// hello 
// world 


7.4.3 JavaScript 标准 库 命名 冲突 举例 
或 许 你 觉得 命名 冲突 不 要 紧 ， 下 面 有 三 个 例子 ， 展 示 了 在 JavaScript 标准 库 演化 过 
程 中 命名 冲突 带 来 的 问题 : 

e。 在 引入 新 方法 Array.prototype.values() 的 时 候 ， 破 坏 了 已 有 的 with 


与 数组 结合 使 用 的 代码 ， 它 会 在 外 面 的 作用 域 中 隐藏 一 个 values 变量 
(bug report 1，bug report 2) 。 因 此 ， 引 入 了 一 种 隐藏 属性 的 机 制 ( 
System.unscopables )° 


e String.prototype.contains 和 MooTools 中 添加 的 一 个 方法 冲突 了 ， 不 


得 不 重 命名 成 String.prototype.includes (bugreport ) 。 

e ES2016 中 的 Array.prototype.contains 方法 也 和 MooTools 中 添加 的 方 
法 冲突 了 ， 不 得 不 重 命名 成 Array,.prototype.includes ( bug report 
) o 


相 比 之 下 ， 通 过 属性 键 System,iterator 给 一 个 对 象 增 加 可 选 代 性 就 不 会 引起 
问题 ， 因 为 该 键 并 不 会 和 任何 键 冲 突 。 


上 述 例子 展示 了 成 为 一 门 web 开发 语言 意味 着 什么 : 向 后 兼容 是 至 关 重 要 的 ， 这 就 
是 为 什么 在 改进 语言 的 时 候 ， 偶 尔 妥 协 是 必须 的 。 这 种 向 后 兼容 的 好 处 就 是 ， 改 进 
老 的 代码 库 很 轻松 ， 因 为 新 的 ECMAScript 版 本 绝 不 会 (好 吧 ， 是 几乎 不 会 ) 破坏 
这 些 老 代码 。 


7.5 Symbol 转换 成 其 他 原始 类 型 


下 面 的 表格 展示 了 Symbol 在 显示 地 或 者 隐 式 地 转换 成 其 他 原始 类 型 的 时 候 会 发 生 
什么 : 


转换 成 显示 转换 隐 式 转换 
boolean Boolean(sym) 一 OK Isym 一 OK 
number Number(sym) — TypeError sym*2 一 TypeError 
String String(sym) 一 OK "+Sym 一 TypeError 
sym.toString() 一 OK ‘${sym} 一 TypeError 


7.5.1 当心 : 隐 式 转换 成 字符 串 
禁止 隐 式 转换 成 字符 串 会 很 容易 导致 下 面 的 错误 : 


const sym = Symbol() ， 


console.log('A symbol: '+sym); // TypeError 
console.log( A symbol: ${sym} ); // TypeError 


要 修复 这 ， 需要 显示 转换 成 字符 串 : 


console.log('A Symbol: '+String(sym)); // OK 
console.log( A symbol: ${String(sym)} ); // OK 


7.5.2 理解 隐 式 转换 规则 


通常 会 禁止 Symbol 的 隐 式 转换 。 本 节 讲 解 了 为 什么 ° 


7.5.2.1 允许 丨 值 检 查 


隐 式 转换 成 布尔 值 是 始终 可 以 的 ， 主 要 用 于 在 让 语 幻 中 检查 丨 值 情况 以 及 其 他 一 些 
场景 : 
If (value) { ::. } 


param = param || 0; 


7.5.2.2 意外 地 将 Symbol 用 作 属 性 键 

Symbol 是 一 种 特殊 的 属性 键 ， 这 就 是 为 什么 需要 避免 意外 地 将 其 转换 成 字符 串 
(字符 串 是 另 一 种 类 型 的 属性 键 ) 。 在 使 用 一 些 操作 符 来 计算 属性 名 的 时 候 ， 这 种 
意外 错误 就 可 能 发 生 : 


myObject[' ' + valuel] 
这 就 是 为 哈 value 是 Symbol 的 时 候 会 抛 出 TypeError 错误 。 


7.5.2.3 意外 地 将 Symbol 用 作 数 组 索引 


你 肯定 也 不 期 望 意外 地 将 Symbol 用 作 数 组 索引 。 下 面 的 代码 展示 了 当 value 是 
Symbol 的 时 候 ， 这 种 错误 就 会 发 生 : 


myArray[1 + valuel] 
这 就 是 为 什么 在 这 种 场景 中 ， 该 操作 会 抛 出 错误 。 
7.5.3 规范 中 的 显示 转换 和 隐 式 转换 


7.5.3.1 转换 成 布尔 类 型 


可 以 使 用 Boolean() 显示 地 将 Symbol 转换 成 布尔 类 型 。 对 于 Symbol 类 型 ， 会 始 
终 返回 true 


> const sym = Symbol('hello'); 
> Boolean(sym) 
true 


Boolean() 通过 内 部 的 ToBoolean() 操作 计算 出 最 终结 果 。 对 于 Symbol 和 其 他 
真 值 ， 该 操作 返回 true 。 


隐 式 转换 同样 使 用 ToBoolean() 


> !sym 
false 


7.5.3.2 转换 成 数值 类 型 


使 用 Number() 将 Symbol 显示 地 转换 成 数值 类 型 : 


> const sym = Symbol('hello'); 
> Number (sym) 
TypeError: can't convert symbol to number 


Number() 通过 内 部 的 ToNumber() 操作 计算 出 最 终结 果 ， 对 于 Symbol ， 该 操作 
会 抛 出 TypeError 。 


隐 式 转换 也 会 使 用 [ToNumber()] : 


> +Synm 
TypeError: can't convert symbol to number 


7.5.3.3 转换 成 字符 串 
使 用 String() 将 Symbol 转换 成 字符 串 : 


> const sym = Symbol('hello'); 
> String(sym) 
'Symbol(hello)' 


如 果 String() 的 参数 是 Symbol ， 那 么 该 方法 会 自己 将 其 转换 成 字符 串 ， 然 后 
返回 用 创建 Symbol 的 时 候 传 入 的 描述 字符 串 (使 用 Symbol() 包 庄 起 来 ) 。 如 
果 没 有 提供 描述 字符 串 ， 就 会 使 用 空 字符 串 : 


> String(Symbol( )) 
'Symbol()' 


toString() 方法 返回 和 String() 相同 的 结果 ， 但 是 都 不 会 调用 对 方 ， 它 们 
都 会 调用 内 部 的 操作 SymbolDescriptiveString() 。 


> Symbol('hello').tostring() 
'Symbol(hello)' 


隐 式 转换 是 通过 内 部 的 ToString() 操作 来 处 理 的 ， 对 于 Symbol ， 会 抛 出 
TypeError 。 Number.parseInt() 方法 会 隐 式 地 将 参数 转换 成 字符 串 : 


> Number .parseInt(Symbol()) 
TypeError: can't convert symbol to string 


7.5.3.4 不 允许 : 使 用 双 目 加 号 操作 符 (+) 转换 


加 号 操作 符 的 处 理 过 程 是 这 样 的 : 


e。 将 两 边 的 操作 数 转换 成 原始 类 型 。 
e@ 如 果菜 一 个 操作 数 是 字符 囊 ， 那 么 另 一 个 操作 数 会 被 隐 式 转换 成 字符 串 (使 用 
ToString() ) ， 然 后 将 它们 串联 起 来 ， 返 回 结果 。 
e。 否则 ， 将 两 个 操作 数 都 转换 成 数值 类 型 ， 然 后 相 加 ， 返 回 结果 。 
直 


隐 式 转换 成 字符 串 和 数值 都 会 抛 出 异常 ， 这 意味 着 不 能 (直接) 将 加 号 运算 符 用 于 
Symbol 。 


> '' + Symbol() 
TypeError: can't convert Symbol to string 
> 工 + Symbol() 
TypeError: can't convert Symbol to number 


7.6 JSON 与 Symbol 


7.6.1 用 JSON.stringify() 生成 JSON 


JSON.stringify() 将 JavaScript 数据 转换 成 JSON 字符 串 。 有 一 个 预 处 理 的 步 
又 可 以 自 定 义 转换 : 传 入 一 个 转换 函数 ， 可 以 将 JavaScript 数据 中 的 任何 数据 转换 
成 另 一 种 数据 。 这 意味 者 可 以 将 不 兼容 JSON 的 值 (比如 Symbol 和 日 期 ) 转换 为 
JSON 兼容 的 值 (比如 字符 串 ) 。 JSON.parse() 使 用 类 似 的 过 程 解 析 JSON 字 
符 串 。 


但 是 ， stringify 会 忽略 掉 非 字符 串 类 型 的 属性 键 ， 所 以 该 方法 仅 对 作为 属性 值 
的 Symbol 有 效 。 例 如 ， 像 这 样 : 


function symbolReplacer(key, value) { 
If (typeof value === 'symbol') { 
return '@@' + Symbol.keyFor(value) + 'Q@Q@'，; 


return value; 


const MY_SYMBOL = Symbol.for('http://example.com/my_symbol'); 
const obj = { myKey: MY_SYMBOL }; 


const str = JSON.stringify(obj, symbolReplacer); 
console.1log(str); 
// {"myKey":"Q@@http://example.com/my_symbol@@"} 


Symbol 被 编码 成 以 '@@' 为 前 级 和 后 级 的 字符 串 。 注 意 ， 只 有 通过 
Symbol.for() 创建 的 Symbol 才 会 有 这 样 的 键 。 


7.6.2 用 JSON.parse() 解析 JSON 


JSON.parse() 将 JSON 字符 串 转换 成 JavaScript 数据 。 有 一 个 后 处 理 步骤 可 以 
自 定 义 转换 : 传 入 一 个 转换 函数 ， 所 谓 的 复活 器 (reviver) ， 可 以 将 JSON 字符 
串 中 的 任何 原始 串 成 其 它 的 数据 。 这 样 就 可 以 将 指定 格式 的 JSON 数据 转换 成 非 
JSON 规范 支持 的 数据 了 。 如 下 所 示 : 


const REGEX_SYMBOL_STRING = /^@Q@(.*)@@$/; 
function symbolReviver(key, value) { 
if (typeof value === 'string') { 
const match = REGEX _ SYMBOL_STRING.exec(value); 
If (match) { 
const symbolkKey = match[1]; 
return Symbol.for(symbolkey); 
} 
} 
return value; 


} 


const parsed = JSON.parse(str, symbolReviver ) ; 
console.1log(parse); 


以 '@@ 为 前 级 和 后 组 的 字符 串通 过 解析 中 间 的 Symbol 键 被 转换 成 Symbol 。 


7.7 Symbol 包装 对 象 


虽然 其 它 所 有 原始 类 型 都 有 字面 量 形式 的 值 ， 但 是 要 创建 Symbol 对 象 ， 还 是 得 调 
用 Symbol 遂 数 。 因 此 ， 有 时 候 很 容易 把 Symbol 欧 数 当成 构造 函数 使 用 。 虽 然 
这 会 返回 Symbol 的 一 个 实例 ， 但 是 并 没有 什么 用 。 所 以 ， 如 果 把 Symbol 函数 当 
成 构造 函数 使 用 的 话 ， 会 抛 出 异常 : 


> new Symbol'( ) 
TypeError: Symbol is not a constructor 


有 一 种 创建 包装 对 象 的 方法 : 将 0bject 当做 一 个 普通 函数 调用 ， 会 将 所 有 的 值 
(包括 Symbol ) 转换 成 对 象 。 


> const sym = Symbol()， 
> typeof sym 
'symbol' 


> const wrapper = Object(sym); 
> typeof wrapper 

"object， 

> wrapper instanceof Symbol 
true 


7.7.1 使 用 [] 和 包装 对 象 键 访 问 属性 


用 来 访问 属性 的 方 括号 操作 符 [] 会 将 字符 串 包 装 对 象 和 Symbol 包装 对 象 解 包 
装 。 我 们 可 以 使 用 如 下 的 对 象 来 检测 这 个 现象 。 


const sym = Symbol('yes ' )， 
const obj = { 

[sym]: 'a', 

Si “0 
}; 


使 用 交互 模式 : 


> const wrappedSymbol = Object(sym); 
> typeof wrappedSymbol 

"object， 

> obj [wrappedSymbol] 

la 


> const wrappedString = new String('str'); 
> typeof wrappedString 

'object' 

> obj[wrappedString] 

oN 


7.7.1.1 规范 中 关于 属性 访问 的 说 明 


获取 和 设置 属性 的 操作 是 通过 内 部 的 ToPropertyKey() 操作 实现 的 ， 其 工作 过 程 如 
下 


e。 用 ToPrimitive() 把 操作 数 转换 成 原始 值 类 型 (优先 选用 string 类 型 ) 

o 如 果 是 原始 值 ， 就 返回 自身 。 

o 对 于 非 Symbol 对 象 ， 如 果 toString() 返回 原始 值 ， 就 使 用 
toString() 转换 ; 否则， 如果 Vvalueof() 返回 原始 值 ， 就 使 用 
value0f() ;否则 ， 抛 出 TypeError 错误 。 

o Symbol 对 象 是 一 个 例外 : 它们 会 被 转换 成 原始 的 Symbol ( 解 包 装 ) 。 

e@ 如 果 转 换 结 果 是 Symbol 原始 值 ， 直接 返回 该 值 。 
e。 否则 ， 通 过 ToString() 强制 将 结果 转换 成 字符 串 。 


~ 


9 变量 与 作用 域 


本 章 将 介绍 在 ECMAScript 6 中 如 何 处 理 变量 与 作用 域 。 


9.1 概览 


ES6 新 增 了 两 个 定义 变量 的 关键 字 : let 与 const ， 它 们 几乎 取代 了 ES5 定 
义 变量 的 方式 : var 。 


9.1.1 Jet 


let 语法 上 非常 类 似 于 var ， 但 定义 的 变量 是 语句 块 级 作用 域 ， 只 存在 于 当前 
的 语句 块 中 。 var 拥有 遂 数 作用 域 。 


在 如 下 的 代码 中 ， let 定义 的 变量 tmp 只 存在 于 行人 开始 的 语句 块 中 : 


function order(x, y) { 
TX > yf 2 人 


let tmp = 
xX。 
y = tmp; 
} 
console.log(tmp === x); // ReferenceError: tmp is not defined 


return [x, yl]; 


| 


9.1.2 const 


const 和 let 类 似 ， 但 是 定义 变量 时 必须 初始 化 值 ， 并 且 是 只 读 的 。 


const foo; 
// SyntaxError: missing = in const declaration 
constehbarn 123 


bar = 456; 
// TypeError: ‘bar is read-only 


9.1.3 定义 变量 的 方式 
下 面 的 表格 对 比 了 在 ES6 中 定义 变量 的 6 种 方式 : 


Var 


let 


const 


function 


class 


import 


Hoisting 


Declaration 


Temporal dead 
zone 


Temporal dead 
zone 


Complete 


No 


Complete 


Scope 
Function 


Block 


Block 


Block 
Block 


Module- 
global 


Creates global 
properties 


Yes 


No 


No 


Yes 


No 


No 


9.2 通过 let 和 const 实现 块 级 作用 域 


let 和 const 创建 的 变量 都 是 块 级 作用 域 : 它们 只 存在 于 包围 它们 的 最 深 的 代 
码 块 中 。 以 下 的 代码 表明 了 let 声明 的 变量 tmp 仅仅 存在 于 if 声明 内 部 。 


function func() { 
If (true) { 
let tmp = 123; 


console.log(tmp); // ReferenceError: tmp is not defined 


相 比 之 下 ， var 声明 的 变量 是 函数 域 : 


function func() { 
Th (Ere) 
var tmp = 123; 


console.log(tmp); // 123 


块 级 作用 域 意味 着 你 能 在 函数 中 重复 声明 变量 (shadow variables ) 


Functaon iunmel( 人 
let foo = 5; 
(en 
let foo = 10; // shadows outer “foo 
console.log(foo); // 10 


console.log(foo); // 5 


9.3 const 创建 不 可 变 的 变量 
let 创建 的 变量 是 可 变 的 : 


etfoon= abe 
foo = 'def'; 
console.log(foo); // def 


常量 通过 const 创建 ， 是 不 可 变 的 - 不 能 重新 赋值 : 


const foo = "abc '， 
foo = 'def'; // TypeError 


9.3.1 陷阱 : const 不 能 确保 值 不 可 变 


const 仅仅 意味 着 变量 总 是 有 相同 的 值 ， 但 是 不 能 确保 可 变 的 值 不 可 变 。 例 如 ， 
obj 是 一 个 常量 ， 但 是 它 指向 的 值 是 可 变 的 - 我 们 能 增加 一 个 属性 给 它 : 


const obj = {1}; 
obj.prop = 123; 
console.log(obj.prop); // 123 


然而 ， 我 们 不 能 重新 分 配 一 个 不 同 的 值 给 obj 
obj = {}; // TypeError 
如 果 你 想 让 obj 不 可 变 ， 你 必须 做 一 些 处 理 ， 例 如 冻结 对 象 : 


const obj = Object.freeze({}); 
obj.prop = 123; // TypeError 


9.3.2 循环 体 中 的 const 


const 变量 一 旦 被 创建 ， 它 就 不 能 被 改变 。 但 是 这 并 不 是 意味 着 你 不 能 通过 特 
环 重新 进入 它 的 作用 域 并 且 赋 值 重新 执行 : 





function logArgs(...args) { 
for (let [index, elem] of 
const message = index 
console.log(message); 
} 
} 
logArgs('Hello', '‘'everyone'); 
yh OU Es 


/1 > 0Hello 
// 1. everyone 


args.entries()) { 


9.4 暂时 性 死 区 (temporal dead zone ) 


let 或 const 声明 的 变量 拥有 暂时 性 死 区 (TDZ) : 当 进 入 它 的 作用 域 ， 它 不 
能 被 访问 (获取 或 设置 ) 直到 执行 到 达 声 明 。 
首先 看 看 不 具有 暂时 性 死 区 的 var 
e。 当 进 入 var 变量 的 作用 域 (包围 它 的 函数 ) ， 立 即 为 它 创建 ( 绑 定 ) 存储 空 
闻 。 变 量 会 立即 被 初始 化 并 赋值 为 ”undefined 。 
e@。 当 执 行 到 变量 声明 的 时 候 ， 如 果 变 量 定义 了 值 则 会 被 赋值 。 
通过 let 声明 的 变量 拥有 暂时 性 死 区 ， 生 命 周期 如 下 : 
@ 当 进 入 let 变量 的 作用 域 (包围 它 的 语法 块 ) ， 立 即 为 它 创 建 ( 绑 定 ) 存储 
空间 。 此 时 变量 仍 是 未 初始 化 的 。 
e。 获取 或 设置 未 初始 化 的 变量 将 抛 出 异常 ReferenceError 。 
e@ 当 执 行 到 变量 声明 的 时 候 ， 如 果 变 量 定义 了 值 则 会 被 赋值 。 如 果 没 有 定义 值 ， 
则 赋值 为 undefined 。 


const 工作 方式 与 let 类似， 但 是 定义 的 时 候 必 须 赋 值 并 且 不 能 改变 。 
在 TDZ 内 部 ， 如 果 获取 或 设置 变量 将 抛 出 异常 : 
if (true) { // enter new scope, TDZ starts 
“a Unamna zedn nan or En oneated 


tmp = 'abc'; // ReferenceError 
console.log(tmp); // ReferenceError 


let tmp; // TDZ ends, tmp is initialized with ‘undefined 
console.log(tmp); // undefined 


tmp = 123; 
console.log(tmp); // 123 


下 面 的 示例 将 演 


演示 死 区 (dead zone) 是 真正 短暂 的 (基于 时 间 ) 和 不 受 空间 条 件 
限制 (基于 位 置 ) 


f(true) /A enter new scope TDzZ starts 
const func = function () { 
console.log(myVar); // OK! 
}; 


// Here we are within the TDzZ and 
// accessing myVar would cause a ReferenceError-、 


let myVar = 3; // TDZ ends 
func(); // called outside TDZ 


9.4.1 typeof 与 暂时 性 死 区 


变量 在 暂时 性 死 区 无 法 被 访问 ， 所 以 无 法 对 它 使 用 typeof 


if (true) { 
console.log(typeof tmp); // ReferenceError 
let tmp; 

} 


我 不 认为 这 对 大 多 数 程 序 员 来 说 是 个 问题 : 用 这 种 方式 检查 变量 是 否 存在 的 主要 存 
在 于 库 中 (特别 是 polyfills) 。 如 果 你 需要 检查 一 个 变量 是 否 存在 ， 你 可 以 通过 其 
他 的 方式 (例如 通过 window ) 。 最 后 ， 从 长 远 来 看 模块 会 减少 这 种 类 型 的 需 


9.5 循环 头 中 的 let 和 const 


在 以 下 循环 头 中 允许 声明 变量 : 


e for 
e for-in 
e for-of 


声明 一 个 变量 ， 你 可 以 使 用 var ， let 或 者 const 。 每 一 种 方式 有 不 一 样 的 
效果 ， 下 面 我 将 进行 解释 。 


9.5.1 for 循环 


在 for 循环 头 中 使 用 var 创建 的 变量 只 创建 单个 绑 定 〈binding ) 


let arr = []; 
for (var i=0; i < 3; i++) { 
arr.push(() => 1); 


arr.map(x => x()); // [3,3,3] 


在 代码 块 中 的 三 个 箭头 函数 中 的 i 都 指向 了 同一 个 binding， 这 就 是 为 什么 他 们 
都 返回 相同 的 值 。 


如 果 你 使 用 let 声明 变量 ， 循 环 的 每 一 次 都 会 创建 一 个 binding : 


let arr = []; 
orm (Lee O01 < 3 ttt) 
arr.push(() => 1); 


} 


arr.map(x => x()); // [0,1,2] 


这 一 次 ， 每 个 i 指向 一 个 循环 体 中 的 binding 并 且 保持 当时 的 值 。 因 此 ， 每 个 箭 
头 函 数 都 返回 不 同 的 值 。 

const 工作 方式 与 var 类似， 但 是 不 能 改变 const 声明 变量 时 初始 化 的 
值 。 

刚 开 始 也 许 会 觉得 在 每 个 循环 中 获取 新 的 binding 似乎 很 奇怪 ， 但 是 当 你 使 用 循环 
创建 指向 循环 变量 的 函数 (例如 事件 处 理 的 回调 ) 时 它 非常 有 用 。 


人 二 | 


9.5 循环 头 中 的 let 和 const 


for 循环 : 规范 中 的 迭代 绑 定 

The evaluation of the for 循环 在 第 二 例 介 绍 var 并 且 在 第 三 例 介绍 
let/const 。 仅仅 let 定义 的 变量 被 加 到 perIterationLets 列表 
(步骤 9) ， 作 为 传递 给 ForBodyEvaluation() 的 第 一 个 之 后 的 参数 
perIterationBindings “。 


9.5.2 for-of 循环 和 for-in 循环 
Ina for-of loop, var creates a single binding: 
在 for-of 循环 头 中 使 用 var 创建 的 变量 只 创建 单个 绑 定 (binding) 
let arr = []; 
om Va eofm 2 
arr.push(() => 1); 
} 


arr.map(x => x()); // [2,2,2] 


let 在 循环 的 每 一 次 都 会 创建 一 个 binding : 


GUEST ee 
Ro (ne or io 有 2 
arr.push(() => i); 


arr.map(x => x()); // [9,1,2] 


const 也 会 在 循环 的 每 一 次 都 会 创建 一 个 binding ， 但 是 创建 的 bindings 是 不 可 


变 的 。 
for-in 循环 与 for-of 工作 方式 类 似 . 


for-of 循环 : 规范 中 的 迭代 绑 定 
在 Forln/OfBodyEvaluation 中 介绍 了 for-of 的 迭代 绑 定 。 在 步骤 5.b 中， 
创建 一 个 新 的 环境 ， 并 且 绑 定 通过 Bindinglnstantiation 被 增加 。 当 前 的 迭代 值 
存 入 变量 nextValue ， 并 且 在 如 下 两 种 方式 中 用 于 初始 化 绑 定 : 
@ 定义 单个 变量 (步骤 5.h.i) : 通过 InitializeReferencedBinding 
e。 解构 (步骤 5. 说 ) :通过 Bindinglnitialization 中 的 一 种 
(ForDeclaration) ， 调 用 Bindinglnitialization 的 另 一 种 
(BindingPattern ) 。 
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9.6 参数 
9.6.1 参数 与 本 地 可 用 变量 
如 果 你 使 用 let 定义 一 个 与 参数 名 相同 的 变量 ， 会 抛 出 静态 错误 : 


Funetaionniune(arg nt 
let arg; // static error: duplicate declaration of ‘arg 
} 


如 果 在 块 中 定义 : 


function func(arg) { 


let arg; // shadows parameter ‘arg. 


相 比 之 下 ， var 定义 与 参数 名 相同 的 变量 不 会 做 任何 处 理 。 


funectlionnfumne(arg) 
var arg; // does nothing 


function func(arg) { 


// We are still in same ‘var scope as ‘arg. 
var arg; // does nothing 


9.6.2 和 参数 默认 值 与 暂时 性 死 区 


如 果 参 数 有 默认 值 ， 也 会 处 于 暂时 性 死 区 : 


// OK: y accesses x after it has been declared 
function foo(x=1, y=x) { 

return [x, yl]; 
} 
foo(); // [1,1] 
// Exception: x tries to access 'y within TDZ 
function bar(x=y, y=2) { 

return [x, yl]; 


bar(); // ReferenceError 


9.6.3 参数 默认 值 无 法 访问 函数 内 作用 域 


参数 默认 值 的 作用 域 被 方法 主体 分 离 。 那 就 意味 着 方法 或 者 函数 的 参数 默认 值 不 能 
访问 方法 块 内 本 地 可 用 变量 : 


let foo = 'outer'; 
function bar(func = x => foo) { 
let foo = 'inner'; 


console.log(func()); // outer 


} 
bar(); 


9.7 全 局 对 象 


JavaScript 中 的 全 局 对 象 (浏览 器 中 为 window ，Node.js 中 为 ”global ) 相对 
于 提供 的 功能 来 说 更 算是 一 个 bug， 特 别 是 在 性 能 方面 。 这 就 是 为 什么 ES6 这 样 规 
十“ 


e@ 以 下 的 命令 可 以 声明 全 局 变量 ， 属 于 全 局 对 象 的 属性 : 
o Var 
o function 
@ 但 下 面 的 命令 声明 的 全 局 变量 ， 不 属于 全 局 对 象 的 属性 : 
o Jlet 
o Cconst 
o Cclass 


9.8 函数 声明 和 类 声明 


e@ 块 级 作用 域 ， 类 似 let 。 
e。 创建 全 局 对 象 的 属性 〈 在 全 局 作用 域 中 ) ， 类 似 var 。 
e。 变量 提升 : 在 作用 域 中 的 所 有 函数 声明 ， 都 会 在 作用 域 的 最 顶部 创建 。 


以 下 的 代码 演示 了 函数 声明 的 变量 提 


{ // Enter a new scope 


console.log(foo()); // OkK, due to hoisting 
unectnonnioo( ee 
return 'hello'; 


@ 块 级 作用 域 

@ 不 创建 全 局 对 象 的 属性 

e@ 变量 不 提升 

类 变量 不 提升 可 能 是 令 人 惊讶 的 ， 因 为 在 本 质 上 它们 创建 了 函数 。 这 种 行为 的 理由 
是 ， 继 承 的 值 是 通过 表达 式 定 义 ， 并 且 这 些 表达 式 必 须 中 适当 的 时 间 执 行 。 


{ // Enter a new scope 
const identity = x => Xx; 


// Here we are in the temporal dead zone of “MyClass 
let inst = new MyClass(); // ReferenceError 


// Note the expression in the ‘extends clause 
class MyClass extends identity(QObject) { 


} 


9.9 代码 风格 : var VS let VS const 


var 能 做 一 件 let 和 const 不 能 做 的 事 : 通过 它 声明 的 变量 成 为 全 局 对 象 
的 属性 。 但 是 可 以 通过 分 配给 window (浏览 器 中 ) 和 global (Node.js 中 ) 
实现 同样 的 效果 。 因 此 ， 我 建议 总 是 使 用 let 和 const 取代 var 。 


const 用 于 不 可 变 变 量 : 


**// Primitive values are immutable 
const PUBLIC_ SYMBOL = Symbol(); 
const MAX_ ENTRIES = 1000,; 


// Some objects are immutable 
const EMPTY_ARRAY = Object.freeze([]); 
Use let for mutable things: 


// A primitive whose value changes 
let counter = 0; 
counter++; 


// A mutable object 

let obj = {0}; 

obj.foo = 123;// Primitive values are immutable 
const PUBLIC_ SYMBOL = Symbol(); 

const MAX_ENTRIES = 1000 ， 


// Some objects are immutable 
const EMPTY_ARRAY = Object.freeze([]); 
Use let for mutable things: 


// A primitive whose value changes 
let counter = 0; 
counter++; 


// A mutable object 
let obj {}; 
obj.foo le 


这 并 不 是 一 个 艰难 的 抉择 ， 并 且 使 用 const 声明 的 可 变 的 对 象 也 没有 问题 。 


10 解构 


ECMAScript 6 ( ES6 ) 支持 解构 ， 一 种 从 对 象 和 数组 中 方便 地 提取 数据 的 方式 。 
本 章 叙 述 了 这 如 何 工作 ， 并 且 给 出 一 些 例 子 展示 它 的 用 处 。 


10.1 概览 


在 接收 数据 的 地 方 〔 比 如 赋值 的 左边 ) ， 解 构 使 你 使 用 模式 去 获取 部 分 数据 。 
下 面 的 代码 是 解构 的 一 个 例子 : 


let obj = { first: 'Jane', last: 'Doe' }; 
let {€ first: f, Jast 1 } = obj /A (A) 
Hf Jane Doe 


在 行人 A 解构 了 obj :通过 左边 的 模式 ， 运 用 赋值 操作 符 (=) 从 里 面 获取 数据 ， 
并 将 数据 赋值 给 变量 f 和 1 。 这 些 变量 事先 自动 声明 好 ， 因 为 该 行 以 let 
开始 。 


也 可 以 解构 数组 : 


em 


解构 可 以 用 于 下 列 情形 : 


// Variable declarations: 


// Assignments: 


[x] = ['a']; 

// Parameter definitions: 
humnetronei 人 el 
f(['a']); 


也 可 以 在 一 个 for-of 循环 中 解构 : 


// Handled like a variable declaration: 
for (let [k,v] of arr.entries()) ……: 


// Handled like an assignment 
for ({name: n, age: ay of arr) .:. 


10.2 背景 : 构造 数据 (对象 和 数组 字面 量 ) 和 解构 数据 


为 了 完全 理解 解构 是 什么 ， 首 先 学 习 更 广泛 的 上 下 文 知 识 。 JavaScript 有 构造 数据 
的 操作 : 


let obj = {}; 
obj.first = 'Jane',; 
obj.last = 'Doe'; 


也 有 获取 数据 的 操作 : 
let f = obj.first; 
let 1 = obj.1last,; 


注意 ， 我 们 使 用 了 与 构造 数据 时 一 样 的 语法 。 
有 更 漂亮 的 语法 来 构造 数据 - 对 象 字面 量 : 


let obj = { first: 'Jane', last: 'Doe' }; 
ECMAScript 6 中 的 解构 使 用 了 相同 的 语法 来 获取 数据 ， 这 被 称 为 一 种 对 象 模式 : 


let { first: f, last: 1 } = obj; 


就 像 对 象 字 面 量 让 我 们 一 次 性 创建 多 个 属性 一 样 ， 对 象 模 式 让 我 们 一 次 性 获取 多 个 
属 性 值 9 


也 可 以 通过 模式 解构 数组 : 


Tet lx VI a /X= v= by 


10.3 模式 


下 面 的 两 部 分 包含 在 解构 过 程 当 中 : 


e 解构 源 : 被 解构 的 数据 。 例 如 ， 解 构 赋 值 右 侧 的 部 分 。 
。 解构 目标 : 用 于 解构 的 模式 。 例 如 ， 解 构 赋 值 左 侧 的 部 分 。 


解构 目标 是 下 列 三 种 模式 之 一 : 
e@ 赋值 目标 。 例 如 : x 
o 在 变量 声明 和 参数 定义 中 ， 仅 允许 指向 变量 。 在 解构 赋值 中 ， 就 有 更 多 的 
选择 了 ， 后 面 再 讲解 。 
e。 对 象 模 式 。 例 如 : {f first: «pattern», last: «pattern» } 


o 对 象 模 式 的 组 成 部 分 是 属性 ， 属 性 值 再 一 次 成 为 模式 〈 递 归 地 ) 。 
e。 数组 模式 。 例 如 : [ «pattern», «pattern»] 


o 数组 模式 的 组 成 部 分 是 元 素 ， 元 素 再 一 次 成 为 模式 (递归 地 ) 。 
这 意味 着 可 以 任意 深 地 内 瞬 模 式 : 


let obj = { a: [{ foo: 123, bar: 'abc' }, {}], b: true }; 
let { a: [{foo: f}] } = obj; // f = 123 


10.3.1 获取 你 需要 的 
解构 一 个 对 象 ， 仅 提取 感 兴趣 的 属性 : 

et XX = X79Y: 9 9// X=37 
如 果 解 构 一 个 数组 ， 可 以 选择 仅 提取 一 个 前 组 : 


ewe [VA oo 


10.4 模式 是 如 何 获取 到 内 部 的 数据 的 ? 


在 赋值 中 pattern = someValue ， pattern 是 如 何 获取 someValue 内 部 
的 数据 的 ? 


10.4.1 对 象 模式 必须 要 数据 是 对 象 
在 获取 属性 之 前 ， 对 象 模式 将 源 解构 成 对 象 。 这 意味 着 解构 对 原始 值 也 有 效 : 


let {length : len} = 'abc'; // len = 3 
let {toString: s} = 123; // s = Number.prototype.toString 


10.4.1.1 对 象 解 构 过 程 中 ， 值 转换 失败 


转换 成 对 象 的 过 程 不 是 通过 Object() 的 ， 而 是 通过 内 部 的 ToObject() 操作 。 
Object() 从 不 失败 : 


> typeof object( abe") 


'object' 

> Var obj = {1}; 

> Object(obj) === ob]j 
true 

> Object(undefined) 
{} 

> Object (null) 

{} 


如 果 转 换 目标 是 undefined 或 者 null ， 则 Toobject() 会 抛 出 一 个 
TypeError 异常 。 因 此 ， 下 面 的 解构 过 程 在 获取 属性 之 前 就 失败 了 : 


let { prop: x } 
let { prop: y } 


undefined; // TypeError 
null; // TypeError 


因此 ， 可 以 使 用 空 的 对 象 模式 {} 去 检测 一 个 值 在 解构 过 程 中 是 否 可 转换 成 一 个 
对 象 。 就 像 上 面 看 见 的 ， 仅 undefined 和 null 不 能 转换 : 


(8 =U NialselD A/ AmaVs anencoenclbleeton octes 
(=ahbe 0K Sungs anescoereble Eo vees 
(人 undefined); // TypeError 


null); // TypeError 


表达 式 两 侧 的 括号 是 必要 的 ， 因 为 在 JavaScript 中 语句 不 能 以 大 括号 开始 。 


10.4.2 数组 模式 通过 可 和 迭代 工作 


数组 解构 使 用 迭代 器 获取 源 的 元 素 。 因 此 ， 可 以 用 数组 的 方式 解构 任何 一 个 可 迭代 
的 值 。 让 我 们 看 一 看 可 迭代 的 值 的 示例 。 


字符 囊 是 可 迭代 的 : 


et A al e/a = bl 


别 忘 了 ， 字 符 囊 的 迭代 器 返回 代码 点 ( code points ) (“ Unicode 字符 ”，21 

位 ) ， “是 代码 单元 (“ JavaScript 字符 "”，16 位 ) 。 (更 多 关于 Unicode 的 信 
息 ， 参 考 " Speaking JavaScript ”的 “ Chapter 24. Unicode and JavaScript " 章 ) 例 
如 : 


let [Xx,y,z] = 'a\uD83D\uDCA9C'; // x="'a'; y="'\uD83D\uDCA9'; z="'C" 


[| 


不 能 通过 索引 下 标 获取 一 个 Set 集合 的 元 素 ， 但 是 可 以 通过 迭代 器 获取 。 因 为 ， 数 
组 解构 对 Set 有 效 : 


Letnlxayvi =—mew Set([ a bn//AX — av bb., 


Set 迭代 器 返回 元 素 的 顺序 与 元 素 持 入 的 顺序 一 致 ， 这 就 是 为 什么 上 述 的 解构 结 
一 样 的 。 


总 是 一 
穷 序列 。 解 构 同 样 对 无 穷 序列 有 效 。 生 成 器 函数 allNaturalNumbers() 返回 
个 迭代 器 ， 生 成 0，1，2，...。 


= 
function* allNaturalNumbers() { 
fomm(le n= 0 nl 
yield n; 


} 
} 


下 面 的 解构 获取 该 无 穷 序列 前 面 的 三 个 元 素 。 








let [x, y, z] = allNaturalNumbers(); // x=0; y=1; 2 


10.4.2.1 数组 解构 过 程 中 ， 值 转换 失败 





如 果 一 个 值 有 一 个 方法 ， 该 方法 有 一 个 键 是 Symbol.iterator ， 键 值 是 一 个 对 
家 ， 那 么 该 值 就 是 可 和 迭代 的 。 如 果 要 解构 的 对 象 不 可 选 代 ， 那 么 数组 解构 时 就 会 抛 
出 TypeError 错误 : 


let x; 

[x] = [true, false]; // OK, Arrays are iterable 

[x] = 'abc'; // OK, strings are iterable 

[x] = { * [Symbol.iterator]() { yield 1 } }; // Ok, iterable 
[x] = {}; // TypeError, empty objects are not iterable 

[xXx] = undefined; // TypeError, not iterable 

[XI —mnuLl;/A TypeError not iterable 


在 获取 迭代 元 素 之 前 TypeError 弄 常 就 会 抛 出 ， 这 意味 着 可 以 使 用 空 的 数组 模 
式 [] 来 检查 一 个 值 是 否 可 和 迭代 : 


[] = 他 /ZL TypeError, empty objects are not iterable 
=undefined; TypeErrorainotterable 
国 = nu /A/ TVDeeErnmor noteieerable 
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10.5 如 果 有 一 部 分 没有 匹配 上 
解构 过 程 中 如 果 要 获取 的 目标 在 源 上 不 存在 ， 此 时 的 处 理 方式 与 JavaScript 处 理 不 
存在 的 属性 和 数组 元 素 一 样 : 内 部 相应 部 分 匹配 上 undefined 。 如 果 该 内 部 部 


分 是 一 个 变量 ， 意 味 着 这 个 变量 会 被 设 为 undefined 


let [x] = []; // x = undefined 
let {prop:y} = {}; // y = undefined 


记 住 : 如 果 去 匹配 undefined ， 对 象 模式 和 数组 模式 都 会 抛 出 TypeError 异 
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10.5.1 默认 值 


默认 值 是 模式 的 一 个 特性 : 如 果 某 个 部 分 (一 个 对 象 属 性 或 者 一 个 数组 元 素 ) 在 源 
里 面 没有 匹配 的 内 容 ， 它 会 得 到 : 


@ 它 的 默认 值 (如 果 指 定 了 默认 值 ) 
e undefined (否则 ) 


也 就 是 说 ， 提 供 默认 值 是 可 选 的 。 
让 我 们 看 一 个 例子 。 在 下 面 的 解构 过 程 中 ， 第 0 个 元 素 在 右 侧 没有 匹配 上 。 因 此 ， 
x 对 应 上 3， 解 构 过 程 继续 ， 最 终 导 致 x 的 值 被 设 为 3。 


let [x=3, y] = []; // x = 3; y = undefined 


也 可 以 在 对 象 模式 中 使 用 默认 值 : 


let {foo: x=3, bar: y} = {}; // x = 3; y = undefined 
10.5.1.1 undefined 使 默认 值 生 效 
当 某 个 部 分 没有 匹配 或 者 匹配 上 的 是 undefined ， 就 会 使 用 默认 值 : 


let [x=1] = [undefined]; // x= 1 
let {prop: y=2} = {prop: undefined}; //y = 2 


此 现象 的 原理 将 会 在 下 一 章 阅 述 ， 在 《默认 参数 》 那 一 节 。 


10.5.1.2 默认 值 按 需 计算 


默认 值 本 身 在 需要 的 时 候 计 算 。 换 句 话 说， 下 面 的 解构 : 


let {prop: y=someFunc()} = SomeVvValue 


等 同 于 : 


let y; 

If (someValue.prop === undefined) { 
y = someFunc(); 

} else { 
y = someValue.prop; 


} 
可 以 通过 console.1og() 来 观测 到 这 个 过 程 : 


> function Log(x) { console.log(x); return YES 
> let [a=log('hello')] = []; 

hello 

>a 

ES 

> let [b=log('hello')] = [123]; 


> b 
23 


在 第 二 个 解构 过 程 中 ， 上 默认 值 没 有 被 触发 ， 所 以 没有 调用 log() “。 


10.5.1.3 默认 值 可 以 指向 模式 中 其 它 变量 


软 认 值 可 以 指向 任何 变量 ， 包 括 在 同一 个 模式 中 的 另 一 个 变量 : 


let [x=3, y=x] = []， // X=3; y=3 
let [x=3, y=x] = [7]; // X=7; y=7 
let [x=3, y=x] = [7, 2]; // x=7; y=2 


但 是 ， 顺 序 很 重要 : 变量 x 和 y 由 左 向 右 依次 声明 ， 如 果 在 声明 之 前 访问 的 
话 ， 就 会 产生 一 个 ReferenceError 异常 : 


let [x=y, y=3] = []; // ReferenceError 


10.5.1.4 模式 的 默认 值 


到 目前 为 止 ， 我 们 值 看 到 变量 的 默认 值 ， 也 可 以 给 模式 设 定 默认 值 : 


ee oD = 


这 意味 着 什么 ? 回忆 一 下 默认 值 的 规则 : 
如 果 模 式 中 茶 部 en ee mone 解构 过 程 继续 
上 面 的 例子 中 ， 在 索引 0 处 的 元 素 没 有 匹配 ， 解 构 过 程 进入 如 下 步骤 : 


let { prop: x } = {}; // x = undefined 


你 可 以 把 模式 { prop: x } 替换 成 变量 pattern 来 更 容 钨 地 看 出 为 什么 会 这 
样 : 


let [pattern = {}] = []; 


更 复杂 的 默认 值 。 让 我 们 更 深入 地 探索 模式 的 默认 值 。 在 下 面 的 例子 中 ， 我 们 通过 
默认 值 { prop: 123 } 给 x 赋 上 一 个 值 : 


let [{ prop: x } = { prop: 123 }] = []; 


因为 在 索引 为 0 处 的 数组 元 素 在 右 侧 没有 相应 匹配 ， 解 构 过 程 以 如 下 所 示 的 形式 继 
续 ， 并 且 x 的 值 被 设 为 123。 


let { prop: x } = { prop: 123 }; // x = 123 


然而 ， 如 果 右 侧 在 索引 0 处 有 一 个 元 素 ， x 将 不 会 以 这 种 方式 被 典 上 一 个 值 ， 
为 并 没有 触发 默认 值 。 


let [{ prop: x } = { prop: 123 }] = [{}]; 
这 种 情形 下 ， 解 构 过 程 像 下 面 这 样 继续 : 
let { prop: x } = 如; // x = undefined 


因此 ， 如 果 想 在 对 象 或 者 属性 不 存在 的 时 候 ， 让 x 被 典 上 值 123， 需 要 为 x 自 
身 指定 上 默认 值 : 


let [{ prop: x=123 = 全] = [QD]; 


10.5 如 果 有 一 部 分 没有 匹配 上 


在 这 里 ， 解 构 过 程 像 下 面 这 样 继续 ， 不 管 右 侧 是 [{}] ， 还 是 [] 。 


let { prop: x=123 } = {}; // x = 123 


仍然 感到 迷惑 
后 面 有 个 章节 从 算法 角度 解释 了 解构 过 程 ， 这 将 会 给 你 一 个 另外 的 视角 。 
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10.6 更 多 对 象 解构 特性 


10.6.1 属性 值 缩写 


属性 值 缩写 是 对 象 字 面 量 的 特性 : 如 果 属 性 的 值 是 通过 一 个 变量 提供 的 ， 这 个 变量 
的 名 字 和 键 名 一 样 ， 就 可 以 省 略 这 个 键 名 。 这 对 结构 也 同样 有 效 : 


let { x, yy }={ XxX: 11, y: 8 }; //xX= 11; y=8 
该 声明 等 同 于 : 


ea 


10.6.2 计算 属性 键 


计算 属性 键 是 另 一 个 对 象 字 面 量 特性 ， 同 样 对 解构 有 效 : 可 以 通过 一 个 表达 式 指定 
属性 键 ， 把 表达 式 放 在 中 括号 里 面 : 


const FO00 = 'foo'， 
TeClIFEOOIL = foo TI23 ET23 


计算 属性 值 允 许 你 解构 键 是 symbol 的 属性 : 


// Create and destructure a property whose key is a Symbol 
const KEY = Symbol(); 

let obj = { [KEY]: 'abc' }; 

let { [KEY]: x } = obj; // x = ' abc. 


// Extract Array.prototype[lSymbol.iterator] 
let { [Symbol.iterator]: func } = []; 
console.log(typeof func); // function 


10.7 更 多 数组 解构 特性 

10.7.1 省 略 

在 解构 过 程 中 ， 省 略 使 用 数组 “空洞 "语法 来 跳 过 元 素 : 
Te 全 全 


10.7.2 剩余 操作 符 (...) 


剩余 操作 符 使 你 能 够 提取 剩余 的 数组 元 素 到 一 个 数组 里 面 。 你 可 以 在 数组 模式 的 最 
后 的 部 分 使 用 这 个 操作 符 : 
TEN 
剩余 操作 符 提 取 数 据 ， 数 组 字面 量 和 函数 调用 都 可 以 使 用 相同 的 扩展 操作 符 语 
法 (...) ， 下 一 章 会 讲解 这 种 用 法 。 
如 果 该 操作 符 没 找到 任何 元 素 ， 将 会 使 操作 数 匹 配 上 一 个 空 数 组 。 也 就 是 说 ， 剩 余 
操作 符 从 不 产生 undefined 或 者 null 。 例 如 : 


let [xr y .21 = Ia XE a,»y=undefined, z=[| 
剩余 操作 符 的 操作 数 不 一 定 是 一 个 变量 ， 也 可 以 是 模式 : 


let /AS lll a 


剩余 操作 符 触 发 了 如 下 解构 过 程 : 
[V2 2 CE 


扩展 操作 符 (...) 看 起 来 和 剩余 操作 符 一 模 一 样 ， 但 是 它 用 于 前 数 调用 和 数组 
字面 量 (不 是 在 解构 模式 里 面 ) 。 


不 仅仅 能 赋值 给 变量 


如 果 通 过 解构 赋值 ， 每 一 个 赋值 对 象 都 可 以 是 任何 的 通常 能 在 左 侧 接受 赋值 的 东 
西 ， 和 包括 指向 属性 的 引用 ( obj.prop ) 和 指向 数组 元 素 的 引用 ( arr[0] 
) Lo) 


let obj 
Jet arr 


{}; 
[] ， 


({ foo: obj.prop, bar: arr[0] }) = { foo: 123, bar: true }; 


console.log(obj); // {prop:123} 
console.log(arr); // [truel] 


也 可 以 通过 剩余 操作 符 (...) 赋值 给 对 象 属性 和 数组 元 素 : 


let obj = {}; 
Ennst oe ob restl= I ae | 
A fnst -> a ob reste = ed 


10.9 解构 陷阱 


在 使 用 解构 的 时 候 ， 要 考虑 两 件 事情 : 


e 一 条 语句 不 能 以 大 括号 开始 。 
@ 在 解构 过 程 中 ， 要 么 声明 变量 ， 要 么 赋值 给 它们 ， 但 是 两 件 事 不 能 一 起 做 。 


下 面 的 两 节 讲述 了 详细 内 容 。 
10.9.1 一 条 语句 不 要 以 大 括号 开始 


因为 代码 块 以 大 括号 开始 ， 因 此 语句 一 定 不 要 以 大 括号 开始 。 这 在 对 象 解 构 赋 值 的 
时 候 会 失败 : 


{ a, b } = someObject; // SyntaxError 


变通 的 方法 是 把 整个 表达 式 放 到 小 括号 中 : 


({ a, b } = someObject); // ok 


10.9.2 对 于 已 经 存在 的 变量 ， 不 能 同时 声明 和 赋值 
在 一 个 解构 变量 声明 的 过 程 中 ， 左 侧 每 一 个 变量 都 声明 了 。 在 下 面 的 例子 中 ， 我 们 
尝试 声明 变量 b ， 并 且 使 用 已 经 存在 的 变量 f ， 这 种 做 法 将 会 失败 : 

let f; 

Jet { foo: f, bar: b } = someObject; 


/Durunonarnsaingmn( beloream nn ne oe 
// SyntaxError: Duplicate declaration, f 


修复 的 方法 是 事先 声明 好 b ， 然 后 解构 赋值 : 
let f; 


let bs, 
({ foo: f, bar: b }) = someObject; 


10.10 解构 示例 
让 我 们 以 几 个 更 小 的 例子 开始 。 


for-of 循环 支持 解构 : 


let map = new Map().set(false, 'no').set(true, 'yes'); 
for (let [key, value|] of map) { 
console.log(key + ' is ' + value); 


} 
可 以 使 用 解构 来 交换 变量 值 ， 引 擎 会 优化 这 个 过 程 ， 因 此 不 会 创建 额外 的 数组 。 


[a, b] = [b, a]l; 


可 以 使 用 解构 来 分 离 数 组 : 


let [first, ...rest|] = 
/AS ares 


10.10.1 解构 返回 值 


一 些 内 置 的 JavaScript 操作 返回 数组 ， 解 构 可 以 辅助 处 理 返 回 的 数组 : 


Jet [all, year, month, day] = 
/A(\d\d\d\d)-(\d\d)-(\d\d)$/ 
.exec('2999-12-31'); 


10.10.2 多 个 返回 值 


为 了 看 一 下 很 有 用 的 多 值 返 回 ， 让 我 们 事先 一 个 函数 findELement(a，p) ， 该 
函数 查找 数组 a 中 第 一 个 使 函数 p 返回 true 的 元 素 。 问 题 是 : 这 个 函数 要 
返回 什么 ? 有 时 可 外 ed 有 时 是 元 素 的 索引 ， 有 时 是 两 
者 都 感 兴 趣 。 下 面 的 实现 两 者 都 返 


function findElLement(array，predicate) { 
for (let [index, element] of array.entries()) { // (A) 
if (predicate(element)) { 
return { element, index }; // (B) 


} 
} 


return { element: undefined, index: -1 }; 


在 人 A 人行， 数组 方法 entries() 返回 一 个 迭代 器 ， 和 迭代 器 的 每 个 元 素 是 一 个 
[index，element] 对 。 每 次 兴 代 解构 一 个 元 素 。 在 B 行 ， 使 用 属性 值 缩写 返回 
对 象 { element: element, index: index } 。 


使 用 findElement() " 在 下 面 的 例子 中 ， 一 些 ECMAScript 6 特性 允许 我 们 书写 
更 加 简明 的 代码 : 回调 函数 是 一 个 箭头 流 数 ， 返 回 值 通 过 对 象 模式 的 属性 值 简写 来 
解构 。 


let arr = [7, 8, 6]; 
let {element, index} = findEljement(arr, x => x % 2 === 0)) 
// element = 8, index = 1 


由 于 index 和 element 也 指向 属性 键 ， 它 们 书写 的 顺序 是 无 关 紧 要 的 : 


Jet {index, element} = findElement(...:); 


我 们 成 功 处 理 了 同事 使 用 索引 和 元 素 的 情况 。 如 果 只 对 其 中 茶 一 个 感 兴趣 怎么 办 ? 
事实 证 明 ， 人 种 情形 ， 并 且 相 对 于 
返回 单一 值 的 函数 ， 语 法 开销 是 最 小 的 。 


Tet a = 7 8 0 


let {element} = findElement(a, x => x % 2 === 0); 
// element = 8 


let {index} = findElement(a, x => x % 2 === 0); 
// index = 1 


每 一 次 ， 仅 提取 需要 的 属性 值 。 


10.11 解构 算法 


本 节 从 不 同 的 角度 来 看 解构 过 程 : 一 个 递归 的 模式 匹配 算法 。 


这 个 不 同 的 角度 应 该 对 理解 黑 认 值 很 有 帮助 。 如 果 你 感觉 自己 没有 完全 理解 解 
构 过 程 ， 那 么 继续 读 下 去 。 


在 最 后 ， 我 将 会 使 用 这 个 算法 解释 下 面 两 个 函数 声明 的 不 同 之 处 。 


function move({x=0, y=0} = {}) { 
Functlionnmoveie Vy = 0 YY 0 


10.11.1 前 法 
解构 赋值 看 起 来 像 这 样 : 


«pattern» = «value» 


我 们 想 使 用 pattern 从 value 里 面 获取 数据 。 我 现在 将 会 描述 一 种 算法 来 做 
这 件 事 ， 这 在 函数 式 编程 中 被 称 为 模式 匹配 ( pattern matching ) (简称 : 匹 
配 ) 。 该 算法 指定 操作 符 。 (“匹配 ”) 用 于 表示 解构 赋值 中 给 pattern 匹配 上 
一 个 value 并 赋值 给 变量 : 


«pattern» ~ «value» 


该 算法 通过 递归 的 规则 执行 ， 这 些 递 归 规 则 在 二 操作 符 两 侧 的 操作 数 都 会 发 生 。 这 
个 声明 性 的 符号 可 能 不 好 适应 ， 但 是 它 让 该 算法 的 说 明 更 加 简洁 明了 。 每 一 个 规则 
都 有 两 部 分 : 


。 头 部 指明 该 规则 应 用 到 的 操作 数 。 
e 主体 部 分 指明 接 下 来 做 什么 。 


我 仅 展 示 解 构 赋 值 的 算法 。 解 构 变 量 声 明和 解构 参数 定义 是 类 似 的 。 
我 也 不 会 讲解 高 级 的 特性 〈 计 和 工 属 性 键 ; 属性 值 缩写 ; 对 象 属性 和 数组 元 素 作 为 赋 
值 目标 ) ， 仅 仅 讲解 基础 的 东西 。 


10.11.1.1 模式 


一 个 模式 是 下 列 的 几 种 形式 之 一 : 
。 一 个 变量 : x 
e 一 个 对 象 模式 : {fekproperties>} 


e 一 个 数组 模式 : [<elementsy>] 


后 面 每 节 描 述 了 这 三 种 情况 中 的 一 种 。 
10.11.1.2 变量 
e。 (1) x .value (包括 undefined 和 null ) 


x = value 


10.11.1.3 对 象 模式 


e。 (2a) {«properties»} . undefined 


throw new TypeError(); 


e (2b) f{«properties»} . null 


throw new TypeError(); 


e (2c) {key: «pattern», «properties»} -~ obj 


«pattern» -~ obj.Kkey 
{«properties»} =- obj 


e。 (2d) {key: «pattern» = default value, «properties»} obj 


let tmp = obj.key; 


if (tmp !== undefined) { 
«pattern» = tmp 
} else { 
«pattern» ~ default_value 
} 


{«properties»} =- 0bj 


e。 (2e) {} ~- obj 


ZNomriopenbreselef mo 


10.11.1.4 数组 模式 


数组 模式 和 和 迭代 器 。 数 组 解构 算法 以 数组 模式 和 一 个 和 迭代 器 开始 : 


e。 (3a) [«elements»] ~ non_iterable 
assert(!isIterable(non_ iterable)) 


throw new TypeError(); 


e。 (3b) [«elements»] ~ iterable 
assert(isIiterable(iterable)) 


let iterator = iterable[Symbol.iterator](); 
«elements» . iterator 


辅助 函数 : 
function isIterable(value) { 
return (value !== null 
&& typeof value === 'object' 
&& typeof value[Symbol.iterator|] === 'function'); 
} 
数组 元 素 和 和 迭代 器 。 算 法 以 模式 和 和 迭代 器 的 元 素 继 续 〈 从 和 迭代 器 中 取 值 ) 


e。 (3c) «pattern», «elements» . iterator 


«pattern» - getNext(iterator) // undefined after last item 


«elements» . iterator 


e。 (3d) «pattern» = default value, «elements» iterator 


let tmp = getNext(iterator); // undefined after last item 


if (tmp !== undefined) { 
«pattern» = tmp 
} else { 
«pattern» ~ default_value 
} 


«elements» . iterator 


e。 (3e) , «elements» . iterator (hole, elision) 


getNext(iterator); // skip 
«elements» iterator 


O 〇 


e (3f) ...«pattern» .iterator (总 是 最 后 一 部 分 1 ) 


let tmp = []; 
for (let elem of iterator) { 
tmp.push(elem); 


«pattern» ~ tmp 


e。 (3g) ~ iterator 


辅助 函数 : 


function getNext(iterator) { 
Jet {done,value} = iterator.next(); 
return (done ? undefined : value); 


10.11.2 应 用 算法 


术 ， 在 有 re * Py 参数 使 用 了 解构 和 黑 计 全 ,， 这样 x 和 y 就 可 以 
省 略 不 传 了 。 但 是 对 象 参数 也 可 以 不 传 ， 就 像 下 面 代码 中 最 后 一 行 一 样 。 此 特性 通 
过 在 函数 声明 头 部 的 ={} 起 作用 。 


Funceronmoveld( X=00 Vv=00 = 
return [x, y]; 


} 

move1({x: 3, y: 8}); // [3, 8] 
movei({x: 3}); // [3, 0] 
move1({}); // [©0, 9] 

move1(); // [©0, 909] 


但 是 为 什么 要 像 上 述 代码 片段 一 样 定义 参数 呢 ?为 什么 不 是 像 下 面 这 样 的 呢 - 这 也 
是 完全 合法 的 ES6 代码 ? 


function move2({xX, y} = { x: 0, y: © })f{ 
return [x, yl]; 
} 
为 了 验证 为 什么 move1() 有 是 正确 的 ， 让 我 们 在 两 个 例子 中 使 用 这 两 种 函数 。 在 做 
这 件 事 之 前 ， 让 我 们 看 看 传递 的 参数 是 如 何 匹配 解析 的 。 


10.11.2.1 背景 : 通过 匹配 传递 参数 


对 于 元 数 调用 ， 形 参 (在 函数 定义 里 面 ) 匹配 实 参 (在 函数 调用 里 面 ) 。 举 个 例 
子 ， 使 用 下 面 的 函数 定义 和 下 面 的 函数 调用 : 


function func(a=0, b=0) { …… } 
func(1, 2); 


参数 a 和 b 和 下 面 的 解构 过 程 类 似 地 被 设置 。 
EE 
10.11.2.2 使 用 move2() 


让 我 们 看 一 下 move2() 的 解构 过 程 是 怎样 的 。 
示例 1。 move2() 会 导致 该 解构 过 程 


[{x, y} = { x: 0, y: 0 }] ~[{] 


左 侧 仅 有 的 数组 元 素 在 右 侧 并 没有 匹配 的 内 容 ， 这 就 是 为 什么 。{x，y} 匹配 上 了 
默认 值 ， 而 不 是 来 自 于 右 侧 的 数据 (规则 3b ，3d ) 


{X， y} ~ { x: 0， y: 0 } 


该 解构 过 程 导 致 下 面 的 两 个 赋值 (规则 2c ，1) 


x 


0; 
0; 


< 


这 就 是 仅 有 的 使 用 上 默认 值 的 情况 。 
示例 2。 让 我 们 看 看 函数 调用 move2({z:3}) ， 这 会 导致 如 下 的 解构 过 程 : 


[{x, y} = { x: 0, y: 0 }] ~ [{z:3}] 


在 右 侧 数组 的 索引 0 处 有 一 个 数组 元 素 。 因 此 ， 默 认 值 会 被 忽略 ， 下 一 步 是 (规则 
3d ) : 


{x, y} ~ { z: 3} 


这 会 导致 x 和 y 都 被 设置 为 undefined ， 这 不 是 我 们 想 要 的 。 


10.11.2.3 使 用 movel() 
让 我 们 尝试 move1() 。 


示例 1 : movel1() 
[{x=0, y=90} = {}] ~ [] 

在 右 侧 数组 的 索引 0 处 没有 一 个 数组 元 素 ， 所 以 使 用 上 默认 值 (规则 3d ) 
{x=0, y=0} ~ 全 

左 侧 包含 属性 值 缩写 ， 解 构 过 程 相当 于 : 
{x: x=0, y: y=0} ~ 全 


属性 x 和 属性 y 在 右 侧 都 没有 匹配 的 内 容 。 因 此 ， 使 用 默认 值 ， 下 一 步 是 如 下 
所 示 的 解构 过 程 (规则 2d ) 


X80 
y-0 


这 会 导致 如 下 的 赋值 (规则 1) 


x 
© 


< 
© 


示例 2 : movel({z:3}) 
[{x=0, y=0} = {}] =- [{z:3}] 
就 像 示 例 1 一 样 ， 属 性 x 和 y 在 右 侧 没有 匹配 的 内 容 ， 所 以 使 用 默认 值 : 


© 
0 


10.11.3 结论 


这 些 例子 展示 了 默认 值 是 模式 部 分 (对 象 属性 或 者 数组 元 素 ) 的 特性 。 如 果 某 个 部 
分 没有 匹配 上 ， 或 者 匹配 到 了 undefined ， 那 么 默认 值 就 生效 了 。 也 就 是 说 ， 
模式 匹配 上 了 默认 值 。 


11 参数 处 理 


在 ECMASCript 6 中 ， 参 数 处 理 得 到 了 显著 地 升级 。 现 在 支持 默认 参数 值 ， 剩 余 参 
数 〈rest parameters ) (可 变 参 数 ) 和 解构 。 


在 本 章 ， 对 解构 过 程 熟悉 会 很 有 帮助 (该 过 程 在 上 一 章 讲解 了 ) 。 


11.1 概览 
默认 参数 值 : 


function findclosestShape(x=0，y=0) { 
OA 


| 


function format(pattern, ...params) { 
return params; 
} 


console oionmat a /nc 


运用 解构 的 命名 参数 : 


function selectEntries({ start=0, end=-1, step=1 } = {0}) I 
// The object pattern is an abbreviation of: 
// { start: start=0, end: end=-1, step: step=1 } 
// Use the variables ‘start ， ‘end and ‘step here 


} 


selectEntries({ start: 10, end: 30, step: 2 }); 
selectEntries({ step: 3 }); 

selectEntries({}); 

selectEntries(); 


11.1.1 扩展 操作 符 ( Spread operator ) (...) 
在 函数 和 构造 器 的 调用 中 ， 扩 展 操作 符 把 可 迭代 的 值 转换 成 参数 : 


> Math.max(-1, 5, 11, 3) 


11 

> Math.max(...[-1, 5, 11, 3]) 

a 

> Math.max(-1, ...[-1, 5, 11], 3) 
11 


在 数组 字面 量 中 ， 扩 展 操作 符 将 可 迭代 的 一 组 值 转换 成 数组 元 素 : 


> [1, ...[2,3], 4] 
[1, 2, 3, 4] 


11.2 参数 解构 


在 ES6 中 ， 处 理 参 数 和 通过 形 参 解构 实 参 的 过 程 是 一 样 的 。 也 就 是 说 ， 下 面 的 十 
数 调用 : 


function func(«FORMAL PARAMETERS») { 
«CODE» 


func(«ACTUAL_ PARAMETERS» ) ; 


大 致 就 是 : 


Jet [«FORMAL PARAMETERS»] = [«ACTUAL PARAMETERS»]; 


«CODE» 


例子 -下面 的 函数 调用 : 


function logSsum(x=0, y=0) { 
console.log(x + y); 


logSsum(7, 8); 
变 成 : 


let [x=0，y=6] = [7, 8]; 


console.log(x + y); 


11.3 默认 参数 值 
ECMAScript 6 允许 给 参数 指定 默认 值 : 


function f(x, y=0) { 
return [x, yl]; 


} 


省 略 第 二 个 参数 就 会 触发 默认 值 : 


> f(1) 

[1，9] 

> f() 
[undefined, 0] 


当心 - undefined 也 会 触发 默认 值 : 


> f(undefined, undefined) 
[undefined, 0] 


默认 值 仅 在 需要 的 时 候 在 后 台 计 算 : 


> const 1og = console.1og.bind(console); 

> function g(x=log('x'), y=log('y')) {return 'DONE'} 
> 9g() 
x 
y 


> g(1, 2) 


11.3.1 为 什么 undefined 会 触发 默认 值 ? 


为 什么 undefined 应 该 被 当成 一 个 缺失 的 和 参数， 或 者 对 象 或 数组 的 缺失 部 分 ? 
这 个 问题 不 是 显 而 多 见 的 。 这 么 做 的 原理 是 它 使 你 能 够 把 默认 值 的 定义 转移 到 其 它 
地 方 去 。 让 我 们 看 两 个 例子 。 


第 一 个 例子 (来源 : Rick Waldron's TC39 meeting notes from 2012-07-24 ) ， 在 
setoptions() 中 不 需要 定义 一 个 默认 值 ， 可 以 把 这 个 任务 转移 到 
setLevel() ° 


function setLevel(newLevel = 0) { 
light.intensity = newLevel,; 
} 


function setOptions(options) { 
// Missing prop returns undefined => use defauit 
setLevel(options.dimmerLevel); 
setMotorSpeed(options. speed); 


} 
setoptions({speed:5}); 


第 二 个 例子 ， square() 不 必 为 x 定义 一 个 默认 值 ， 可 以 将 这 个 任务 转移 到 
multiply() 


function multiply(x=1, y=1) { 
return x * y; 
} 


function square(x) { 
return multiply(x, x); 
} 


默认 值 更 进一步 undefined 指 代 不 存在 的 内 容 而 null 指 代 空 ( 
emptiness ) 的 语意 


11.3.2 在 默认 值 中 使 用 其 它 变 量 
在 参数 的 默认 值 中 ， 可 以 使 用 任何 变量 ， 包 括 其 它 参 数 : 


function foo(Xx=3，y=xX) 
foo( ); // X=3; y=3 
foo(7); WH Mam WE 
foo(7, 2); // x=7; y=2 


然后 ， 顺 序 很 重要 : nn 
明 的 参数 ， ， 将 会 抛 出 ReferenceError 异常 


默认 值 存 在 于 它们 自己 的 作用 域 中 ， 该 作用 域 介 0 马 数 
体 “ 内 部 "作用 域 之 间 。 因 此 ， 在 默认 值 中 不 能 访问 函数 内 部 的 变 


let x = 'outer'; 
function foo(a = x) { 
ele x nmenm 


console.log(a); // outer 


在 上 面 的 例子 中 ， 如 果 没 有 外 部 的 x ， 黑 认 值 x 将 会 产生 一 个 
ReferenceError 异常 。 


如 果 默 认 值 是 闭 包 ， 该 限制 可 能 让 人 非常 吃惊 : 


function foo(callback = () => BAR) { 
const BAR = 3; // can’t be accessed from default value 
callback( ); 


foo(); // ReferenceError 


11.4 剩余 参数 ( Rest parameters ) 
将 剩余 操作 符 (...) 放 在 最 后 一 个 形 参 的 前 面 意味 着 该 形 参 会 接收 到 所 有 剩 下 的 实 
参 (这 些 实 参 放置 在 一 个 数组 中 ， 然 后 传 给 这 个 形 参 ) 。 


Fume om (XY 


如 果 没 有 剩余 的 和 参数， 剩余 参数 将 会 被 设置 为 空 数组 : 


f(); // x = undefined; y = [|] 


扩展 操作 符 (...) 看 起 来 和 剩余 操作 符 一 模 一 样 ， 但 是 它 用 于 有 函数 调用 和 数组 
字面 量 ee o 


11.4.1 禁止 再 使 用 arguments  ! 


剩余 参数 可 以 完全 替代 JavaScript 的 臭名 昭著 的 特殊 变量 arguments 。 剩 余 参 
数 的 优点 是 它 总 是 数组 : 


// ECMAScript 5: arguments 
function logAllArguments() { 
for (var i=0; i < arguments.length; i++) { 
console.log(arguments[1]); 
} 


} 


// ECMAScript 6: rest parameter 
function logAllArguments(...args) { 
for (let arg of args) { 
console.log(arg); 
} 


11.4.1.1 混合 解构 过 程 和 访问 解构 值 


一 个 有 趣 的 arguments 的 特性 就 是 定义 普通 参数 的 同时 ， 也 会 拿 到 所 有 参数 的 
一 个 数组 : 


function foo(x=0, y=0) { 
console.log('Arity: '+arguments.1length); 


在 这 种 情形 下 ， 如 果 将 一 个 剩余 参数 和 数组 解构 结合 起 来 ， 就 可 以 避免 使 用 
arguments 了 。 最 终 的 代码 相对 较 长 ， 但 是 更 加 清晰 : 


funetrioneioo( angs oe 
let [x=0, y=0] = args; 
console.log('Arity: '+args.length); 


这 对 命名 参数 也 有 效 〈 可 选 对 象 ) 


function bar(options = {}) { 
Jet { namedParami, namedParam2 } = options,; 


if ('extra' in options) { 


} 


11.4.1.2 arguments 是 可 和 迭代 的 


在 ECMAScript6 中， arguments 是 可 和 迭代 的 ， 这 意味 着 你 可 以 使 用 for-of 
循环 和 扩展 操作 符 : 


> (function () { return typeof arguments[Symbol.iterator] }()) 
'function' 

> (function () { return Array.isArray([...arguments]) }()) 
true 


11.5 模拟 命名 参数 


在 编程 语言 中 调用 一 个 函数 (或 者 方法 ) 的 时 候 ， 你 必须 将 实 参 (调用 者 指定 的 ) 
映射 到 形 参 (函数 中 定义 的 ) 。 有 两 种 方式 来 完成 这 种 映射 : 


e@ 位 置 相关 的 参数 通过 位 置 来 映射 。 第 一 个 实 参 映射 到 第 一 个 形 参 ， 第 二 个 实 兄 
映射 到 第 二 个 形 参 ， 以 此 类 推 。 


e 命名 参数 使 用 名 字 (标签 ) 来 实现 这 种 上 映射。 名字 和 在 函数 定义 中 的 形 参 关联 
起 来 ， 在 函数 调用 中 给 实 参 打上 标记 。 命 名 参数 以 何 种 顺序 出 现 并 不 重要 ， 因 
为 它们 被 正确 标记 了 。 


命名 参数 主要 有 两 个 好 处 : 在 函数 调用 中 它们 提供 了 参数 描述 ， 同 时 对 于 可 选 对 象 
也 能 轻松 应 对 。 我 将 会 首先 介绍 这 些 好 处 ， 然 后 向 你 展示 在 JavaScript 中 如 何 通过 
对 象 字 面 量 模拟 命 ，， 


闪 


A 
会 
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11.5.1 作为 描述 的 命名 参数 


只 要 一 个 函数 有 超过 一 个 的 参数 ， 你 可 能 就 会 对 每 一 个 参数 用 来 做 什么 感到 迷惑 。 
例如 ， 假 设 有 一 个 函数 selectEntries() ， 返 回 一 组 来 自 于 数据 库 的 条 目 。 给 
出 函数 调用 : 


selectEntries(3, 20, 2); 


这 两 个 数字 是 什么 意思 ? Python 支持 命名 参数 ， 所 以 在 Python 中 可 以 很 轻松 地 说 
明 发 生 了 什么 


# Python syntax 
selectEntries(start=3, end=20, step=2) 


11.5.2 可 选 的 命名 参数 


可 选 的 位 置 相关 的 参数 ， 仅 在 位 于 形 参 末 尾 的 时 候 被 省 略 才 会 正常 工作 。 其 它 情 
形 ， 必 须 插入 占 位 符 ( 比 如 null ) ， 以 便于 剩 下 的 参数 能 正确 对 上 位 置 。 


对 于 可 选 的 命名 参数 来 说 ， 这 不 是 问题 。 你 可 以 轻易 地 省 略 任何 一 个 参数 。 下 面 有 
一 些 例子 : 


# Python syntax 
selectEntries(step=2) 
selectEntries(end=20, start=3) 
selectEntries() 


11.5.3 在 JavaScript 中 模拟 命名 参数 
对 于 命名 参数 ，JavaScript 并 没有 像 python 和 其 它 很 多 语言 一 样本 地 支持 。 但 是 


有 一 种 合理 的 优雅 的 模拟 方式 : 通过 对 象 字 面 量 的 命 SE 
入 。 当 你 使 用 这 种 方式 的 时 候 ， 一 次 selectEntries() 的 调用 看 起 来 像 这 


selectEntries({ start: 3, end: 20, step: 2 }); 


函数 接收 到 一 个 对 象 ， 该 对 象 有 start ， end 和 step 属性 。 你 可 以 省 略 任 
全 一直 


selectEntries({ step: 2 }); 
selectEntries({ end: 20, start: 3 }); 
selectEntries(); 


在 ECMAScript 5 中 ， 你 可 能 像 下 面 这 样 实现 selectEntries() 


function selectEntries(options) { 


options = options || 全 7， 
Var start = options.start || 0; 
var end = options.end || getDbLength(); 


Var step = options.step || 1; 


在 ECMAScript 6 中 ， 你 可 以 使 用 解构 ， 看 起 来 像 这 样 : 


function selectEntries({ start=0, end=-1, step=1 }) { 


} 


如 果 你 调用 selectEntries() 不 传 入 参数 ， 解构 就 会 失败 ， 因 为 你 不 可 能 让 一 
个 对 象 模式 匹配 上 undefined 。 这 个 问题 可 以 通过 默认 值 来 修复 。 在 下 面 的 代 
码 中 ， 如 果 没 有 传 入 任何 参数 的 话 ， 对 象 模式 会 匹配 上 {} 。 


function selectEntries({ start=0, end=-1, step=1 } = {}) I 


} 


你 也 可 以 将 位 置 相 关 的 参数 和 命名 参数 结合 起 来 。 通 常 的 做 法 是 把 命名 参数 放 在 最 
po 


someFunc(posArgi, { namedArg1: 7，namedArg2: true }); 


原则 上 ，JavaScript 引擎 会 优化 这 种 模式 ， 这 样 就 不 会 创建 中 间 对 象 ， 因 为 调用 方 
的 对 象 字面 量 和 函数 定义 处 的 对 象 模式 都 是 静态 的 。 


在 JavaScript 中 ， 此 处 展示 的 命名 参数 形式 有 时 被 称 为 可 选项 或 者 可 选 对 象 〈( 比 
如 ，jQuery 文档 ) 。 


11.6 参数 解构 示例 


11.6.1 提示 : 箭头 函数 中 单个 参数 两 边 的 括号 


在 后 面 的 内 容 中 ， 我 会 偶尔 使 用 箭头 函数 。 因 此 ， 一 个 快速 的 提示 : 如 果 一 个 箭头 
函数 只 有 一 个 参数 ， 并 且 那 个 参数 是 一 个 标识 符 ， 你 可 以 省 略 参 数 两 边 的 括号 。 例 
如 ， 在 下 面 的 REPL 交互 中 ， x 两 边 没 有 括号 : 


> [1,2,3] .map(x => 2 * x) 
[ 2, 4, 6 ] 


然而 ， 当 单个 参数 不 是 一 个 标识 符 的 时 候 必 须 带 上 括号 : 


> [[1,2], [3,4]].map(([a,b]) => a + b) 
[ 3, 7] 


> [1, undefined, 3].map((x='yes') => x) 
[ 1, 'yes', 3] 


更 多 详细 内 容 在 箭头 函数 那 一 章 有 讲解 。 


11.6.2 forEach() 和 解构 


在 ECMAScript 6 中 你 可 能 将 会 大 量 使 用 for-of 循环 ， 但 是 数组 方法 
forEach() 同样 从 解构 中 获 益 。 更 精确 地 说 ， 它 的 回调 函数 获 益 了 。 


第 一 个 例子 : 在 数组 中 解构 数组 。 


let items = [ ['foo', 3], ['bar', 9] ]; 
items.forEach(([word, count]) => { 
console.log(word+' '+count); 


}); 


第 二 个 例子 : 解构 数组 中 的 对 象 。 


let items = [ 
{ word:'foo', count:3 }, 
{ word:'bar', count:9 }, 

]; 

items.forEach(({word, count}) => { 
console.log(word+' '+count); 


}); 


11.6.3 转换 Map 


一 个 ECMAScript 6 Map 没有 map() 方法 ( 像 数组 一 样 的 ) 。 因 此 ， 必 须要 这 
样 : 


e@ 1、 和 转换 成 一 个 [key,value] 对 的 数组 。 
e 2、 在 数组 上 调用 map() 方法 。 
e。 3、 将 结果 转换 回 Map 。 


这 个 过 程 看 起 来 像 下 面 这样 。 


let mapo = new Map([ 
[1, 'a'], 
[2, 'b'], 
[3, 'c'], 


]); 


let map1 = new Map( // step 3 
[...map0] // step 1 
-map(([k, v]) => [k*2, '_'+v]) // step 2 


了 
/Resulengn Ma 2 > 6 CN 


11.6.4 处 理 通过 Promise 返回 的 数组 
工具 方法 Promise.all() 以 如 下 方式 运作 : 


。 输入 :一 组 Promises 。 
。 输出 : 在 最 后 输入 的 Promise 返回 了 的 时 候 ， 就 会 有 一 个 Promise 返回 一 个 
数组 ， 这 个 数组 包含 了 输入 的 Promises 返回 的 结果 。 


解构 可 以 帮助 处 理 Promise.all() 最 终 返 回 的 数组 : 


let urls = [ 
'http://example.com/foo.html', 
'http://example.com/bar.html', 
'http://example.com/baz.html', 
]; 


Promise.all(urls.map(downloadUr1)) 
.then(([fooSstr, barstr, bazSstr]) => { 


了 


// This function returns a Promise that resolves to 
// a string (the text) 
function downloadUrl(url) { 


return fetch(url).then(request => request. text()); 
} 


fetch() 就 是 一 个 基于 Promise 的 XMLHttpRequest 。 这 是 Fetch 标准 的 一 
部 分 。 


11.7 编码 风格 小 建议 

本 节 会 提 到 几 个 描述 参数 定义 的 技巧 。 很 高 明 ， 但 是 也 有 缺陷 : 使 代码 看 起 来 很 
乱 ， 并 且 更 难 理解 。 

11.7.1 可 选 参数 


我 偶尔 使 用 参数 默认 值 undefined 来 标记 某 个 参数 是 可 选 的 (除非 这 个 参数 已 
经 有 一 个 默认 值 了 ) 


function foo(requiredParam, optionalParam = undefined) { 


} 


11.7.2 必需 的 参数 


在 ECMAScript 5 中 ， 有 几 种 可 选 方法 用 于 确保 提供 了 必需 的 参数 ， 但 是 都 显得 相 


function foo(mustBeProvided) { 
if (arguments. length < 1) { 
throw new Error(); 


(uo narguments Dot 
throw new Error(); 


if (mustBeProvided === undefined) { 
throw new Error(); 


} 


在 ECMAScript 6 中 ， 你 可 以 (大量 ) 使 用 默认 值 来 写 出 更 加 简洁 明了 的 代码 (来 
自 于 Allen Wirfs-Brock 的 想法 ) 


/A 
* Called if a parameter is missing and 
* the default value is evaluated. 
Sh 
function mandatory() { 
throw new Error('Missing parameter ' ) ， 


function foo(mustBeProvided = mandatory()) { 
return mustBeProvided ， 


} 
交互 模式 : 


> foo() 

Error: Missing parameter 
> foo(123) 

123 


11.7.3 指定 最 多 参数 个 数 


本 节 展 示 三 种 方法 来 指定 最 多 参数 个 数 。 例 子 中 的 函数 f 参数 个 数 不 超过 2 - 如 
果 调 用 者 传 入 的 参数 超过 2 个 ， 会 抛 出 一 个 错误 。 


第 一 个 方法 是 在 剩余 参数 args 中 搜集 所 有 的 实 参 ， 然 后 检查 它 的 长 度 。 


EUmCEOnEE i argqs de 
If (args.length > 2) { 
throw new Error(); 


// Extract the real parameters 
let [x, y] = args; 


第 二 个 方法 依赖 于 不 想 要 的 参数 出 现在 了 剩余 参数 empty 中 。 


functaoni thi(X Vv emtey) i 
If (empty.length > 0) { 
throw new Error(); 


} 


第 三 种 方法 使 用 一 个 守卫 值 ， 如 果 传 入 了 第 三 个 参数 ， 就 得 不 到 守卫 值 了 。 警 告 一 
点 就 是 如 果 传 入 的 第 三 个 参数 的 值 是 undefined ， 也 会 触发 默认 值 OK 。 


const OK = Symbol(); 
function f(x, y, arity=OK) { 
if (arity !== OK) { 
throw new Error(); 


} 


慧 剧 的 是 ， 每 一 个 方法 写 出 的 代码 都 看 起 来 乱糟糟 的 ， 并 且 概 念 混乱 。 我 倾向 于 检 
查 arguments.length ， 但 是 又 希望 废弃 arguments 。 


Fumectuonei(Ce Vy 人 
if (arguments. length > 2) { 
throw new Error(); 
} 


11.8 扩展 运算 符 (...) 

扩展 操作 符 (...) 和 剩余 操作 符 看 起 来 很 像 ， 但 是 两 者 是 对 立 的 : 

e。 剩余 操作 符 提取 数组 ， 用 于 剩余 参数 和 解构 。 

。 扩 展 操作 符 将 数组 元 素 转换 成 函数 调用 的 参数 或 者 数组 字面 量 的 元 素 。 
11.8.1 哆 数 和 方法 调用 中 的 扩展 操作 


Math.max() 是 一 个 很 好 的 例子 ， 用 于 说 明 扩 展 操作 符 在 方法 调用 中 是 如 何 运 作 
的 。 Math.max(x1，x2，.'.) 返回 值 最 大 的 参数 。 该 方法 接收 任意 数目 的 参 
数 ， 但 是 不 接收 数组 。 扩 展 操作 符 弥补 了 这 文 个 缺陷 : 


> Math.max(-1, 5, 11, 3) 

dl 

> Math.max(...[-1, 5, 11, 3]) 
dl 


相对 于 剩余 操作 符 ， 你 可 以 在 参数 序列 的 任何 部 分 使 用 扩展 操作 符 


> Math.max(-1, ...[-1, 5, 11], 3) 
11 


另 一 个 例子 是 JavaScript 没有 一 种 方式 来 追加 一 个 数组 的 元 素 到 另 一 个 数组 的 后 

面 。 但 是 ， 数 组 确实 有 push(x1，x2，...) 方法 ， 该 方法 将 所 有 传 入 的 参数 追 

加 到 接收 者 。 下 面 的 代码 展示 了 可 以 如 何 使 用 push() 追加 arr2 中 的 元 素 到 
arr1 中 去 。 


Jet arr1 
Jet arr2 


arri.push(...arr2); 
/ani SamoWa la ee | 


11.8.2 构造 器 中 的 扩展 操作 
余 了 函数 和 方法 调用 之 外 ， 扩 展 操作 符 也 对 构造 器 调用 生效 : 


new Date(...[1912, 11, 24]) // Christmas Eve 1912 


这 在 ECMAScript 5 中 是 难以 实现 的 。 


11.8.3 数组 中 的 扩展 操作 
扩展 操作 符 也 可 用 于 数组 : 


> [1, ...[2,3], 4] 
[1, 2, 3, 4] 


由 ex 二 三 和 [rat 

let ye 

Letez 0 ed 
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11.8.3.1 将 可 迭代 的 或 者 类 数组 的 对 象 转换 成 数组 
扩展 操作 符 能 够 将 任何 可 迭代 的 对 象 转换 成 数组 : 


let arr = [...somelterableObject]; 


将 Set 转换 成 数组 : 


lJet set 
let arr 


new Set([11, -1, 6]); 
[ESC] 


自 定义 的 可 迭代 对 象 也 可 以 用 同样 的 方式 转换 成 数组 : 


let obj = { 
* [Symbol.iterator]() { 
yield au ， 
Vie bu 
yielon es, 
} 
}; 


et Ar ob/ ed 


注意 ， 就 像 for-of 循环 ， 扩 展 操作 符 仅 对 可 和 迭代 对 象 有 效 。 大 多 数 重 要 的 对 象 

都 是 可 迭代 的 : 数组 ， Map ，Sets 和 arguments 。 大 多 数 DOM 数据 结构 最 终 

也 将 会 变 得 可 迭代。 

你 应 该 遇 到 过 一 些 对 象 不 可 迭代， 但 是 是 类 数组 的 《索引 化 的 元 素 加 上 一 个 
length 属性 ) ， 你 可 以 使 用 Array,from() 将 它 转换 成 一 个 数组 : 


11.8 扩展 操作 符 (...) 


let arrayLike = { 


yOu 'a', 
ea De 
U2 WC 
length: 3 


jp 


ECGMNMASGIDSE 
var arr1i = [].slice.call(arrayLike); // ['a', 'b', 'c'] 


// ECMAScript 6: 
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] 


// TypeError: Cannot spread non-iterable object. 
let arr3 = [...arrayLikel]; 
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12 ECMAScript 6 中 的 可 调用 实体 


本 章 给 出 在 ES6 中 关于 如 何 正 确 使 用 可 调用 实体 (通过 函数 调用 ， 方 法 调用 等 
等 ) 的 建议 ， 包 含 三 节 : 
e@ 可 调用 实体 的 概览 。 
@ 适合 何 种 可 调用 实体 的 建议 。 
e 两 种 方法 调用 的 检测 ， 在 ES6 中 是 如 何 改 变 的 : 
o 发 送 方法 调用 消息 ， 例 如 obj.m(x，y) 
o 直接 方法 调用 ， 例 如 obj.m.call(obj, x, y) 


12.1 ECMAScript 6 中 的 可 调用 实体 


在 ES6 中 ， 有 如 下 可 调用 的 实体 : 


传统 的 函数 (通过 函数 表达 式 和 函数 声 

生成 器 函数 (通过 生成 器 函数 表达 式 和 生成 器 函数 声明 创建 ) 
箭头 函数 (只 有 一 种 表达 式 的 形式 ) 

方法 (通过 对 象 字 面 量 和 类 定义 中 的 方法 定义 创建 ) 

生成 器 方法 【通过 对 象 字面 量 和 类 类 定义 的 生成 器 方法 定义 创建 ) 
类 (通过 类 表达 式 和 类 声明 创建 ) 


注意 我 区 分 了 


e@ 这 种 实体 : 例如 传统 函数 
@ 创建 实体 的 语法 : 例如 函数 表达 式 和 函数 声明 


尽管 它们 的 表现 差异 很 大 (后面 讲解 ) ， 但 是 所 有 实体 都 是 函数 。 例 如 : 


> typeof (() => {}) // arrow function 


'function' 

> typeof function* () {} // generator function 
'function' 

> typeof class {} // class 

'function' 


接 下 来 ， 我 们 详细 学 习 每 一 种 可 调用 实体 。 


12.1.1 ES6 中 的 调用 方式 
某 些 调用 可 以 发 生 在 任何 地 方 ， 其 它 调 用 被 限制 在 指定 的 区 域 。 


12.1.1.1 可 以 在 任何 地 方 发 生 的 调用 


在 ES6 中 有 三 种 调用 可 以 发 生 在 任何 地 方 : 


e 函数 调用 : func(3，1) 
e@ 方法 调用 : obj.method('abc') 
e@ 构造 器 调用 : new Constr(8) 


对 于 函数 调用 ， 记 住 这 点 很 重要 : 大 多 数 ES6 代码 会 被 包含 进 模 块 ， 并 且 模 块 体 
隐 式 地 设 为 了 严格 模式 。 


12.1.1.2 通过 super 调用 的 方式 被 限制 在 指定 的 区 域 
两 种 调用 可 以 通过 super 关键 字 发 生 ; 它们 的 使 用 被 限制 在 指定 的 区 域 : 


e@ 父 方法 调用 : super.method('abc') 
仅 在 对 象 字 面 量 或 者 继承 类 定义 的 方法 定义 中 可 用 。 
e@ 父 构 造 器 调用 : super(8) 


仅 在 继承 类 特殊 的 方法 constructor() 中 可 用 。 


12.1.1.3 非 方 法 函数 ( non-method function ) 和 方法 


非 方法 函数 和 方法 之 间 的 区 别 在 ES6 中 变 得 更 加 明显 了 。 现 在 两 者 都 有 特殊 的 实 
体 ， 并 且 只 有 它们 能 做 相应 的 事情 : 
。 箭头 函数 就 是 非 方法 函数 。 它 从 父 作 用 域 中 拉 取 this 和 其 它 变 量 (“词法 的 
eh ") 。 
e 方法 定义 就 是 方法 。 它 支持 super ， 指 向 父 属 性 和 实现 父 方 法 调用 。 


12.1.2 传统 的 函数 


有 些 函 数 来 自 于 ES5 。 有 两 种 方式 创建 这 些 函数 : 
e 有 函数 表达 式 : 
conse fioo = functionn(C 0 0 
。 子 数 声明 
functione fioo(G 


this 规则 : 


e@ 函数 调用 : 在 严格 模式 下 ， this 为 undefined ， 宽 松 模式 下 为 全 局 对 


象 。 
@ 方法 调用 : this 是 方法 调用 消息 的 接收 者 (或 者 是 call/apply 的 第 一 
个 参数 ) 。 


@ 构造 器 调用 : this 是 新 创建 的 实例 。 


12.1.3 生成 器 函数 


生成 器 元 数 在 生成 器 章节 介绍 。 它 们 的 语法 和 传统 的 函数 类 似 ， 但 是 有 一 个 额外 的 
星 号 : 


conmnst foo funceaon (x EN 


function fooG0 ee = 


this 规则 如 下 所 示 。 注 意 this 绝 不 会 指向 当前 生成 器 对 象 。 


e@ 芒 数 /方法 调用 : 和 传统 的 函数 一 样 处 理 this 。 该 调用 的 返回 值 是 生成 器 对 
象 。 

e。 构造 器 调用 : 在 一 个 生成 器 函数 中 访问 this 会 引起 ReferenceError 。 
构造 器 调用 的 结果 是 一 个 生成 器 对 象 。 


12.1.4 方法 定义 
方法 定义 在 对 象 字 面 量 中 出 现 : 


let obj = { 
add(x, y) { 
metunmne Xe ty; 
7/ commals regquired 


sub(x, y) 【 
ReBunn Xe 
/comman ns opkilonad 


了 


在 类 定义 中 : 


class AddSub { 


add(x, y) { 
return x + y; 


} // no comma 


sub(x, y) { 
return x -= y; 
} // no comma 


方法 定义 是 唯一 一 个 可 以 使 用 super 指向 父 属 性 的 地 方 。Only method 
definitions that use super produce functions that have the property 
[[HomeObject]], which is required for that feature (details are explained in the 
chapter on classes). 


规则 : 


e@ 函数 调用 : 如 果 取 出 一 个 方法 ， 像 函数 一 样 调 用 它 ， 这 个 方法 就 表现 得 和 传统 
函数 一 样 了 。 

@ 方法 调用 : 和 传统 函数 一 样 ， 但 是 额外 地 允许 你 使 用 super 。 

e。 构造 器 调用 : 产生 一 个 TypeError 。 


在 类 定义 中 ， 名 为 ”constructor 的 方法 很 特别 ， 在 后 面 


只 
过 
< 

局 
于 


12.1.5 生成 器 方法 定义 


方法 在 生成 器 章 。 它 的 语法 和 和子 数 定 义 类 似 ， 但 是 带 有 一 个 额外 的 星 
号 : 
let obj = { 
* generatorMethod(...) { 
} 
jeg 
class MyClass { 
* generatorMethod(...) { 
} 
} 
规则 : 


@ 调用 一 个 生成 器 方法 返回 一 个 生成 器 对 象 。 
e。 你 可 以 使 用 this 和 super ， 就 像 你 在 通常 的 方法 定义 中 一 样 。 


12.1.6 箭头 亟 数 
靖 头 函 数 在 它 自己 的 那 一 章 讲解 : 


下 


let squares = [1,2,3].map(x => x * x); 


下 面 的 变量 词法 上 在 箭头 函数 里 〈 从 父 作 用 域 中 拉 取 ) 


e arguments 

e Super 

e this 

e new.target 
规则 : 


入 刻 


e@ 函数 调用 : 词法 的 this 等 等 。 


。 方法 调用 : 你 可 以 使 用 箭头 函数 作为 方法 ， 但 是 this 仍然 是 词法 的 ， 并 不 


指向 方法 调用 消息 的 接收 者 。 
e@ 构造 函数 调用 : 产生 一 个 TypeError 。 


12.1.7 类 
类 在 它 自己 的 那 一 章 中 讲解 。 


// Base class: no ‘extends. 
class Point { 
constructor(x, y) { 
hasex0 = x 
this.y = y; 
} 
toString() { 


eeu (oth x Ss thse vi 
} 
} 


// This class is derived from “Point - 
class ColorPoint extends Point { 
constructor(x, y, color) { 
super (x, y); 
this.color = color; 


} 
toString() { 


return super.tostring()+ " in " + this.color; 
} 


constructor 方法 很 特殊 ， 因 为 它 “ 变 成 了 "类 。 也 就 是 说 ， 类 和 构造 器 函数 非常 
相似 : 


> Point.prototype.constructor === Point 
true 


规则 : 


e@ 函数 /方法 调用 : 类 不 能 以 函数 或 者 方法 的 形式 调用 (在 类 的 那 一 章 中 解释 了 为 
什么 ) 。 

@ 构造 器 调用 : 遵循 一 个 支持 子 类 的 协议 。 在 基 类 中 ， 创 建 一 个 实例 ， 然 后 
this 指向 它 。 一 个 继承 类 从 它 的 父 类 中 获取 它 的 实例 ， 这 就 是 为 什么 要 在 
访问 this 之 前 使 用 super 。 


12.2 风格 思 


有 些 关于 使 用 实体 调用 时 的 推荐 。 


12.2.1 推荐 使 用 箭头 函数 作为 回调 


无 论 什么 时 候 ， 只 要 可 以 ， 都 应 该 使 用 箭头 函数 作为 回调 ， 而 不 是 传统 的 方式 。 和 
头 函 数 更 加 方便 ， 因 为 可 以 拿 到 词法 的 this ， 并 且 语 法 上 更 加 紧凑 。 
12.2.1.1 问题 : 作为 隐 式 参数 的 this 

不 幸 的 是 ， 一 些 JavaScript API 使 用 this 作为 回调 函数 的 隐 式 参数 ， 此 时 就 没 
法 使 用 箭头 函数 了 。 例 如 : 行 B 中 的 this 是 行人 A 元 数 的 隐 式 参数 。 


beforeEach(function () { // (A) 
this.addMatchers({ // (B) 
toBeInRange: function (start, end) { 


12.2.1.2 解决 方案 1 : 修改 API 
修复 很 简单 ， 但 是 需要 修改 AP| : 


beforeEach(api => { 
api.addMatchers({ 
toBeInRange(start, end) { 


} 


}); 
}); 


我 们 将 AP| 从 一 个 隐 式 的 变量 this 转换 成 了 显示 的 参数 api 。 我 喜欢 这 种 明 
确 性 。 


12.2.1.3 解决 方案 2 : 用 另外 的 方式 获取 this 的 值 


在 一 些 API 中 ， 有 一 些 可 选 的 方式 得 到 this 值 。 例 如 ， 下 面 代码 使 用 this 


O 


Var $button = $('#myButton'); 
$button.on('click', function () { 
this.classList.toggle('clicked'); 


}); 


但 是 这 个 事件 的 目标 也 可 以 通过 event.target 拿 到 : 


Var $button = $('#myButton'); 
$button.on('click', event => { 
event.target.classList.toggle('clicked'); 

}); 

12.2.2 当心 防 数 定义 

只 要 不 访问 this ， 函 数 定义 和 非 方法 函数 一 样 安全 。 
funetlon tioo(argl arg2 of 
} 


也 可 以 可 选 地 使 用 const 和 血 头 函数 ， 这 会 得 到 词法 的 this ， 但 是 -可 能 - 
看 起 来 不 漂亮 : 


const foo = (arg1，arg2) => { 


je 


12.2.3 对 于 方法 ， 推 荐 使 用 方法 定义 
方法 定义 是 唯一 的 一 种 创建 方法 (使 用 super ) 的 方式 。 这 是 对 象 字 面 量 和 类 


(定义 方法 的 唯一 方式 ) 明显 的 选择 ， 但 是 要 给 已 经 存在 的 对 象 添 加 一 个 方法 会 怎 
么 样 呢 ? 例 如 : 


MyClass.prototype.foo = function (arg1，arg2) { 


了 


下 面 是 一 个 在 ES6 中 完成 同样 事情 的 快速 ( 某 种 程度 上 会 造成 污染 ) 方式 。 


Object.assign(MyClass.prototype, { 
foo(arg1i, arg2) { 


} 
}); 


更 多 的 信息 和 说 明 ， 参 看 关于 0bject.assign() 的 那 一 节 。 


12.2.4 方法 和 回调 了 泡 数 属性 之 间 的 区 别 
在 对 象 方法 和 作为 回调 集合 的 对 象 之 间 有 一 些 细微 的 差别 。 
例如 ， 你 可 以 像 下 面 一 样 使 用 WHATWG 流 API : 


let stream = new ReadableStream({ 
start(controller) { 


}, 

pull() { 

0 

cancel() { 

ye 
}); 


也 就 是 说 ， ReadableStream() 的 参数 是 一 个 带 有 方法 的 对 象 。 这 允许 start 
， pull 和 cancel 使 用 this 来 彼此 调用 ， 访 问 本 地 对 象 〈( object-local ) 
状态 。 


另 一 方面 ， 你 可 能 轻易 地 看 到 这 三 个 指向 回调 函数 的 属性 ， 这 些 回调 函数 与 父 作用 
域 (例如 一 个 方法 ) 交互 。 此 时 this 应 该 就 是 词法 范围 的 ， 代 码 看 起 来 像 下 面 
这 样 。 


let stream = new ReadableStream({ 
start: controller => { 


}, 

pull: () => { 
0 
cancel: () => { 
Sy 


} ye 


12.2.5 在 ES6 中 避免 IIFE 


本 节 给 出 在 ES6 中 避免 1IFE 的 小 技巧 。 


12.2.5.1 用 代码 块 替换 TIFE 


在 ES5 中 ， 如 果 想 保持 一 个 变量 本 地 化 ， 就 必须 要 使 用 IIFE : 


(functrionmnQ| /A oDen ElsEe 
Var tmp = ..:; 


}()); // close IIFE 


12.2.5.2 使 用 模块 替换 TIFE 


在 ECMAScript 5 代码 中 ， 并 不 会 通过 库 (比如 RequireJS ，browserify 或 者 
webpack ) 来 使 用 模块 ， 直 接 的 模块 形式 很 流行 ， 并 基于 IIFE 。 它 的 好 处 就 是 清 
楚 地 区 分 了 公开 的 和 私有 的 : 


var my module = (function () { 
// Module-private variable: 
Var countInvocations = 0; 


function myFune(x)n 
countInvocations++; 


} 


// Exported by module: 
return { 

myFunc: myFunc 
}; 


}()); 


上 例 中 的 模块 形式 产生 一 个 全 局 的 变量 ， 可 以 像 下 面 这 样 使 用 : 


my_module.myFunc(33); 


在 ECMAScript 6 中 ， 模 块 是 内 置 的 ， 这 就 是 为 什么 采取 这 种 方式 的 障碍 很 小 


// my_module.js 


// Module-private variable: 
Jet countInvocations = 0; 


export function myFunc(x) { 
countInvocations++; 


该 模块 不 会 产生 一 个 全 局 的 变量 ， 使 用 方式 如 下 : 


Import { myFunc } from 'my_module.js'; 


myFunc(33); 


12.2.5.3 立即 调用 的 箭头 函数 


在 ES6 中 有 一 种 场景 仍然 需要 立即 调用 函数 : 有 时 候 想 通 过 一 组 语 多 产生 一 个 结 
果 ， 而 不 是 通过 一 个 单一 的 表达 式 。 如 果 想 内 联 这 些 语 揣 ， 就 必须 要 立即 调用 一 个 
函数 。 在 ES6 中 ， 如 果 想 的 话 ， 可 以 使 用 立即 调用 的 箭头 函数 : 


const SENTENCE = 'How are you? '; 
const REVERSED_SENTENCE = (() => { 
// Iteration over the string gives us code points 
// (better for reversal than characters) 
let arr = [...SENTENCE]; 
arr.reverse(); 
return arr.join(''); 


})(); 


注意 ， 必 须 像 上 面 展 示 的 一 样 加 上 小 括号 (小 括号 包 住 箭头 函数 ， 而 不 是 整个 函数 
调用 ) 。 在 箭头 函数 那 一 章 有 详细 的 解释 。 


12.2.6 使 用 类 


ES6 的 类 是 不 完美 的 ， 有 一 些 批评 者 。 但 是 我 还 是 建议 使 用 类 ， 因 为 也 有 一 些 面向 
对 象 的 论据 对 ES6 的 类 有 利 ， 我 在 关于 类 的 那 一 草 中 有 介绍 。 


12.3 ECMAScript 5 和 6 中 的 传递 方法 调用 消息 和 直接 
调用 方法 
在 JavaScript 中 有 两 种 方式 调用 方法 : 


@ 通过 发 送 调用 消息 ， 例 如 obj,.someMethod(argg，arg1) 
e 直接 地 ， 比 如 someFunc,call(thisValue，arg9，arg1) 


本 节 解 释 了 这 两 种 方式 如 何 运 作 ， 和 为 什么 在 ES6 中 将 会 很 少 直接 调用 方法 。 在 
开始 之 前 ， 先 复习 一 下 关于 原型 链 的 知识 。 


12.3.1 背景 知识 : 原型 链 


记 住 JavaScript 中 每 一 个 对 象 实际 上 都 是 在 一 条 链 上 的 ， 这 条 链 上 面 有 一 个 或 多 个 
对 象 。 第 一 个 对 象 从 后 一 个 对 象 上 继承 属性 。 例 如 ， 数 组 ['a'，'b'] 的 原型 链 
看 起 来 像 这 样 : 

1、 存 放 元 素 'a' 和 'b' 的 实例 

2、 Array 构造 器 提供 的 属性 集 Array,.prototype 


3、 0bject 构造 器 提供 的 属性 集 0bject,.prototype 
4、 null ( 链 的 末端 因此 不 是 一 个 丨 正 的 成 员 ) 


可 以 通过 0bject,getPrototype0of() 查看 原型 链 : 


> var arr = ['a', 'b']; 

> Var p = Object.getPrototypeof; 
> p(arr) === Array.prototype 
true 

> p(p(arr)) === Object.prototype 
true 

> p(p(p(arr))) 

null 


“前 面 的 "对象 上 的 属性 和 覆盖“ 后面" 对象 上 的 属性 。 例 如 ， Array.prototype 提供 
了 一 个 数组 版 本 的 ”toString() 方法 ， 复 盖 了 
Object.prototype.toString() 。 


> var arr = ['a', 'b']; 

> Object.getOwnPropertyNames(Array.prototype) 
[IEostrndgh Jonm nop | 

> arr,toString() 

'a,b' 


12.3.2 发 送 方法 调用 消息 

方法 调用 arr,toSstring() 实际 上 包含 两 个 步骤 : 
e 1、 消 息 发 送 :在 arr 的 原型 链 上 ， 找 到 第 一 个 名 字 为 ”toString 的 属 
e 二 调用 : 调用 找到 的 值 ， 然 后 设置 隐 式 的 this 参数 为 消息 接收 者 arr 


如 


你 可 以 通过 使 用 函数 的 call() 方法 显示 地 执行 这 两 个 步骤 : 


> Var func = arr.toString; // dispatch 
> func.call(arr) // direct call, providing a value for ‘this. 
aml 


12.3.3 直接 方法 调用 
在 JavaScript 中 有 两 种 方式 直接 调用 方法 : 


e Function.prototype.call(thisValue, arg0?, arg1?, ...:) 
e Function.prototype.apply(thisValue, argArray) 


call 和 apply 这 两 个 方法 都 在 函数 上 调用 。 它 们 是 通常 的 函数 调用 不 一 样 ， 
因为 可 以 指定 this 值 。 call 在 方法 调用 中 一 个 个 地 提供 参数 ， apply 是 
通过 一 个 数组 提供 。 


通过 动态 发 送 消息 的 方式 调用 方法 有 一 个 问题 ， 方 法 需要 在 对 象 的 原型 链 中 。 
call() 使 得 可 以 在 调用 一 个 方法 的 时 候 直接 指定 消息 接收 者 。 这 意味 着 可 以 其 

它 对 象 中 借 出 一 个 不 在 当前 原型 链 中 的 方法 。 例 如 ， 可 以 对 arr 调用 原始 的 未 被 
盖 的 0bject,prototype,toString 方法 : 


> Object.prototype.toString.call(arr) 
' [object Array]' 


对 大 量 对 象 都 有 效 的 方法 (不 仅仅 是 “它们 的 "构造 器 生成 的 实例 ) 称 作 通 用 方法 ( 

generic ) 。《 Speaking JavaScript 》 中 有 一 组 方法 全 是 通用 方法 ， 包 含 大 多 数 数 
组 方法 和 所 有 0bject.prototype (这 上 面 的 方法 必须 要 能 正确 处 理 所 有 对 象 ， 

因此 隐 式 地 就 是 通用 方法 了 ) 上 的 方法 。 


12.3.4 直接 方法 调用 的 使 用 场景 


本 节 涵 盖 了 直接 方法 调用 的 使 用 场景 。 每 一 次 ， 我 会 先 描述 ES5 中 的 使 用 场景 ， 
然后 是 ES6 中 的 变化 (将 会 很 少 使 用 直接 方法 调用 了 ) 。 


12.3.4.1 ES5 : 通过 一 个 数组 给 一 个 方法 提供 参数 


值 ， 怎 么 做 ? 


例如 ， push() 给 一 个 数组 追加 几 个 值 : 


一 些 函 数 接收 多 个 值 ， 但 是 每 个 参数 对 应 一 个 值 。 如 果 想 通过 一 个 数组 传 入 这 些 
怎 


>Val ae= eas Lo 
> arr.push('c', ' 

4 

> arr 

[ 15 ols WC Wo ] 


但 是 却 不 能 追加 整个 数组 。 可 以 通过 使 用 apply() 来 变通 处 理 这 个 限制 : 
> var arr = ['a', 'b']; 
> Array.prototype.push.apply(arr, ['c', 'd']) 
4 


> al 
[ Diu Do eo 'd! ] 


类 似 地 ， Math.max() 和 Math.min() 仅 对 单一 值 有 效 : 


> Math.max(-1, 7, 2) 
7 


有 了 apply() ， 可 以 用 数组 的 方式 来 使 用 这 些 方法 : 


> Math.max.apply(null, [-1, 7, 2]) 
7 


12.3.4.2 ES6 : 扩展 操作 符 (...) 基本 上 取代 了 apply() 

通过 apply() 的 直接 的 方法 调用 ， 仅 仅 是 因为 像 把 一 个 数组 转换 成 一 组 参数 显得 
很 笨拙 ， 这 就 是 为 什么 ECMAScript 6 有 扩展 操作 符 (...) 。 其 至 在 发 送 方 法 调用 
消息 中 也 可 以 使 用 。 


> Math.max(...[-1, 7, 2]) 
7 


为 一 个 例子 : 


VRVYV 


扩展 操作 符 对 new 操作 符 同样 有 效 : 


> new Date(...[2011, 11, 24]) 
Sat Dec 24 2011 00:00:00 GMT+0100 (CET) 


注意 apply() 不 能 和 new 结合 使 用 - 上 述 功能 在 ECMAScript 5 中 只 能 通过 复 
杂 的 过 回 方式 来 实现 。 


12.3.4.3 ES5 : 把 类 数组 对 象 转换 成 数组 


JavaScript 中 的 一 些 对 象 是 类 数组 的 ， 它 们 很 像 数 组 了 ， 但 是 没有 任何 数组 方法 。 
看 两 个 例子 。 


第 一 个 ， 郊 数 中 特殊 的 变量 arguments 就 是 类 数组 的 。 它 有 一 个 length 属性 
和 索引 化 的 元 素 访问 。 


> Var args = function () { return arguments }('a', 'b'); 
> args.length 

2 

> args[0] 

4 人 


但 是 _ arguments 并 不 是 Array 的 实例 ， 没 有 forEach() 方法 。 


> args instanceof Array 
false 

> args.forEach 
undefined 


第 二 个 ，DOM 方法 document ,querySelectorAlL1() 返回 一 个 NodeList 的 
实例 。 


> document.querySelectorAll('a[lhref]') instanceof NodeList 

true 

> document .querySeJlectorAl1('alhref]').forEach // no Array metho 
ds! 

undefined 


对 于 很 多 复杂 的 操作 ， 需 要 先 将 类 数组 对 象 转 换 成 数组 。 这 通过 
Array.prototype.slice() 实现 。 该 方法 将 方法 调用 接收 者 的 元 素 拷贝 到 一 个 
新 的 数组 里 面 : 


> var arr = ['a', 'b']; 
> arr.slice() 


[ a leu ] 
> arr.slice() === arr 
false 


如 果 直 接 调用 slice() ， 可 以 将 一 个 NodeList 转换 成 数组 : 


var domLinks = document.querySelectorAll('a[lhref]'); 
var links = Array.prototype.slice.call(domLinks); 
links.forEach(function (link) { 

console.1log(link); 


上 


也 可 以 将 arguments 转换 成 数组 : 


function format(pattern) { 
// params start at arguments[1], skipping pattern- 
var params = Array.prototype.slice.call(arguments, 1); 
return params,; 


} 
console loiornmas a /ne 


12.3.4.4 ES6 : 类 数组 对 和 象 不 再 恼人 


一 方面 ，ECMAScript6 有 Array.from() ， 一 个 简单 地 将 类 数组 对 象 转换 成 数 
组 的 方法 : 


let domLinks = document ,querySelectorAl]1('a[href] ' ) ， 
let links = Array.from(domLinks); 
links.forEach(function (link) { 

console.1log(link); 


J 


另 一 方面 ， 不 会 再 需要 类 数组 的 arguments ， 因 为 ECMAScript 6 有 剩余 参数 
(通过 三 个 点 声明 ) : 


function format(pattern, ...params) { 
return params ; 


console.log(format('a', 'b', 'c')); // ['b' 


12.3.4.5 ES5 : 安全 地 使 用 hasownProperty() 


obj .hasownProperty('prop') 可 以 辨别 obj 是 否 有 自 有 (不 是 继承 来 的 ) 
属性 prop 。 


> var obj = { prop: 123 }; 


> obj.hasownProperty('prop') 
true 


> 'toString' in obj // inherited 

true 

> obj.hasOwnProperty('toString') // own 
false 


然而 ， 如 果 和 覆盖 了 0bject.prototype.hasownProperty ， 那 么 通过 发 送 方法 调 
用 消息 的 方式 调用 hasownProperty 将 会 得 到 错误 的 结果 。 


> Var obj1 = { hasOwnProperty: 123 }; 
> obj1.hasOownProperty('toString') 
TypeError: Property 'hasOwnProperty' is not a function 


如 果 0bject.prototype 没有 在 对 象 的 原型 链 上 ， hasownProperty 就 不 能 通 
过 发 送 消息 的 方式 调用 了 。 


> Var obj2 = Object.create(null); 
> obj2.hasOownProperty('toString') 
TypeError: Object has no method 'hasOwnProperty' 


在 这 两 种 情形 下 ， 解 决 的 方法 是 使 用 直接 调用 的 方式 : 


> Var obj1 = { hasOwnProperty: 123 }; 
> Object.prototype.hasOwnProperty.call(obj1i, 'hasOwnProperty') 
true 


> Var obj2 = Object.create(null); 
> Object.prototype.hasOwnProperty.call(obj2, 'toString') 
false 


12.3.4.6 ES6 : 很 少 使 用 hasownProperty() 
hasownProperty() 大 多 数 时 候 用 于 通过 对 象 实现 Map 。 所 幸 的 是 ， 


ECMAScript 6 有 内 置 的 Map 数据 结构 ， 这 意味 着 将 会 很 少 使 用 
hasOwnProperty() | 


12.3.4.7 ES5 : 避免 中 间 对 象 


在 字符 串 上 调用 数组 特有 的 方法 《比如 join() ) 一 般 都 包含 两 个 步骤 : 


ER 


var str = 'abc'; 
var arr = str.split(''); // step 1 
var joined = arr.join('-'); // step 2 


console.log(joined); // a-b-c 


字符 囊 是 类 数组 的 ， 可 以 成 为 通用 数组 方法 的 this 值 。 因 此 ， 直 接 调用 的 话 就 
可 以 少 掉 第 一 步 : 


var str = 'abc'; 
var joined = Array.prototype.join.call(str, '-'); 


类 似 地 ， 在 拆 分 ( split ) 了 字符 串 之 后 或 者 通过 直接 调用 ， 都 可 以 在 字符 串 上 调用 
map() 


> function toUpper(x) { return x.toUpperCase() } 
> 'abc' .split('').map(toUpper) 
'A', Bo Ca ] 


| 


> Array.prototype.map.call('abc', toUpper) 
'A', Bue > ] 


| 


注意 直接 的 调用 可 能 更 加 高 效 ， 也 更 优雅 ， 这 种 方式 是 很 值得 的 ! 


12.3.4.8 ES6 : 避免 中 间 对 象 


如 果 第 二 个 参数 传 入 回调 函数 ， Array.from() 可 以 在 一 步 之 内 执行 转换 和 map 
操作 。 


> Array.from('abc', ch => ch.toUpperCase()) 
[ A Ba Wy ] 


提示 一 下 ， 两 步 完成 的 方法 是 : 


> 'abc' .split('').map(function (x) { return x.toUpperCase() }) 
[ 'A', Bu V8 ] 


12.3.5 Object.prototype 和 Array.prototype 的 缩 
写 

你 可 以 通过 一 个 空 的 对 象 字 面 量 ( 它 的 原型 是 0bject.prototype ) 来 访问 
0bject.prototype 上 面 的 方法 。 例 如 ， 下 面 两 个 直接 方法 调用 是 等 价 的 : 


Object.prototype.hasOwnProperty.call(obj, 
{}.hasOwnProperty.call(obj, 'propKey') 


'propKey') 
对 于 Array.prototype 也 是 同样 的 : 


Array.prototype.slice.call(arguments) 
[].slice.call(arguments) 


这 种 方式 很 流行 。 相 对 于 更 长 那 种 方式 ， 短 的 那 种 方式 并 没有 很 清楚 地 反映 代码 书 
写 者 的 意图 ， 但 是 没 那么 嚼 叶 。 执 行 速度 上 面 ， 两 种 版 本 都 没有 太 大 区 别 。 


13 箭头 函数 


13.1 概览 


箭头 函数 有 两 个 好 处 。 
第 一 个 ， 没 有 传统 函数 那么 吧 喀 : 


et arnm = 2 Si 
let squares = arr.map(x => x * x); 


// Traditional function expression: 
let squares = arr.map(function (x) { return x * x }); 


第 二 个 ， this 从 父 作 用 域 (词法 的 ) 中 拉 取 。 因 此 ， 不 再 需要 使 用 
或 者 that = this 。 


function UiComponent { 
let button = document.getElementById('myButton'); 
button.addEventListener('click', () => { 
console.Jog(' CLICK'); 
this.handleCclick(); // lexical ‘this. 
}); 


下 面 的 变量 都 是 词法 范围 的 : 


arguments 
super 
this 
new. target 


bind() 


13.2 因为 this ， 传 统 的 函数 都 是 糟糕 的 非 方法 函数 


在 JavaScript 中 ， 传 统 的 函数 可 以 被 用 作 : 


e 1、 非 方法 函数 
e 2、 方法 
@ 3、 构 造 器 


它们 之 间 是 冲突 的 : 因为 在 第 二 种 和 第 三 种 中 ， 函 数 总 是 有 自己 的 this 变量 。 
但 是 ， 有 时 会 拿 不 到 想 要 的 那个 this ， 比 如 从 一 个 回调 函数 (第 一 种 ) 中 获取 
外 面 方法 中 的 this 。 


可 以 在 下 面 的 ES5 代码 中 看 到 这 个 现象 : 


function Prefixer(prefix) { 
this.prefix = prefix; 
} 


Prefixer .prototype.prefixArray = function (arr) { // (A) 
'use Strict ' ， 
return arr.map(function (x) { // (B) 
/DOeSmn ee Womke 
returnm this.prefix + Xx; // (C) 
}); 
}; 


在 C 行 ， 我 们 想 访问 this.name ， 但 是 由 于 行 B 的 函数 在 作用 域 链 上 和 窗 盖 了 来 
自 于 行人 方法 的 this ， 因 此 是 无 法 访问 的 。 在 严格 模式 下 ， 非 方法 函数 中 的 
this 是 undefined ， 这 就 是 为 什么 在 使 用 prefixer 的 时 候 抛 出 错误 : 


> var pre = new Prefixer('Hi '); 
> pre.prefixArray(['Joe', 'Alex'|]) 
TypeError: Cannot read property 'prefix' of undefined 


在 ECMAScript 5 中 有 三 种 方法 解决 这 个 问题 。 


13.2.1 方 法 1: that = this 


你 可 以 将 this 赋值 给 一 个 不 会 被 隐藏 的 变量 。 这 就 是 下 面 行 A 所 做 的 : 


function Prefixer(prefix) { 
this.prefix = prefix; 
} 


Prefixer .prototype.prefixArray = function (arr) { 
var that = this; // (A) 
return arr.map(function (x) { 
return that.prefix + x; 
}); 


}; 
现在 Prefixer 像 预期 一 样 运作 了 : 


> var pre = new Prefixer('Hi '); 
> pre.prefixArray(['Joe', 'Alex'|]) 
[ 'Hi Joe', HL Alex” | 


13.2.2 方法 2 :为 this 指定 一 个 值 


有 几 个 数组 方法 有 一 个 额外 的 参数 用 于 指定 在 调用 回调 函数 的 时 候 的 this 值 。 
这 就 是 下 面 行 A 最 后 一 个 参数 : 


funetaon pretixenm(prefnx dt 
this.prefix = prefix; 
} 


Prefixer .prototype.prefixArray = function (arr) { 
return arr.map(function (x) { 
return this.prefix + x; 
ans) /eA 
}; 


13.2.3 方法 3 : bind(this) 


可 以 使 用 方法 bind() 转换 一 下 在 调用 的 时 候 才 决定 的 this 值 (通过 
call() ， 郊 数 调 用 ， 方 法 调用 ， 等 等 )， 将 其 变 为 固定 的 值 。 这 就 是 下 
所 做 的 。 


function Prefixer(prefix) { 
this.prefix = prefix; 
} 


Prefixer .prototype.prefixArray = function (arr) { 
return arr.map(function (x) { 
return this.prefix + Xx; 
}.bind(this)); // (A) 


13.2.4 ECMAScript 6 的 解决 方案 : 箭头 函数 


朋 
箭头 隐 数 基于 方法 3， 用 一 种 更 加 方便 的 语法 。 使 用 箭头 函数 ， 代 码 看 起 来 像 下 面 
这 样 。 


function pref ixer(prefix) 
this.prefix = prefix; 
} 


Prefixer .prototype.prefixArray = function (arr) { 
return arr.map((x) => { 


return this.prefix + Xx; 
}); 
}; 


如 果 要 把 上 述 代码 完全 ES6 化 ， 就 要 使 用 类 和 更 加 紧凑 多 样 的 箭头 函数 : 


class Prefixer { 


constructor(prefix) 1 
this.prefix = prefix; 


prefixArray(arr) { 
return arr.map(x => this.prefix + x); // (A) 
} 


在 行 A， 调 整 了 一 下 箭头 函数 两 边 的 部 分 ， 节 省 了 几 个 字符 : 


e@ 如 果 只 有 一 个 参数 ， 并 且 这 个 参数 是 一 个 标识 符 ， 那 么 可 以 省 略 小 括号 。 

。 在 箭头 后 面 跟 一 个 表达 式 会 使 表达 式 的 值 被 直接 返回 。 

在 上 面 的 代码 中 ， 也 可 以 看 到 方法 constructor 和 prefixArray 使 用 新 的 ， 
更 加 紧凑 的 ES6 语法 定义 ， 该 种 写法 对 对 象 字面 量 也 同样 有 效 。 


13.3 箭头 区 9 数 语 法 


先 用 “ 胖 ? 箭 头 => (相对 于 瘦 箭 头 -> ) 的 原因 是 与 CoffeeScript 兼容 ， 两 者 非常 


类 似 。 
指定 参数 : 
() =>{... } // no parameter 
X=>{... }// one parameter, an identifier 
(x, Yy) =>{ ... } // several parameters 
指定 函数 体 : 


x => { return x * x } // block 
x => x * x // expression, equivalent to previous lJine 


这 些 语句 块 表现 得 像 疼 通 的 函数 体 。 例 如 ， 需 要 用 return 返回 一 个 值 。 如 果 只 


之 过 
ee 个 表达 式 ， 那 么 这 个 表达 式 的 值 会 被 隐 式 返回 
注意 ， 只 有 一 个 表达 式 的 箭头 函数 省 略 了 多 少 哎 嗪 的 东西 。 比 较 : 


Jet Squares 
Jet Squares 


2 3map(functionn (x returm x x 
[1, 2, 3]j.map(x => x * x); 


13.4 词法 范围 的 变量 


13.4.1 变量 值 的 来 源 : 静态 的 和 动态 的 

下 面 是 一 个 变量 能 够 接收 到 值 的 两 种 方式 。 

第 一 种 ， 静 态 地 (词法 地 ) : 变量 的 值 由 程序 的 书写 解构 决定 ， 从 父 作 用 域 中 获取 
值 。 例 如 : 

et xX 237 


funetaonniool(y 
return x; // value received statically 


} 
第 二 种 ， 动 态 地 : 通过 函数 调用 获得 值 。 例 如 : 


fiunceionmbam(arng ne 
return arg; // value received dynamically 


} 


13.4.2 箭头 部 数 中 的 词法 变量 
this 的 来 源 是 一 个 区 分 箭头 部 数 的 重要 方面 : 


e。 传统 函数 有 一 个 动态 的 this ， 它 的 值 取决 于 函数 如 何 调用 。 
。 箭头 部 数 有 一 个 词法 的 this ， 它 的 值 取 决 于 父 作 用 域 。 


完整 的 从 词法 范围 获取 值 的 一 组 变量 是 : 
arguments 

super 

this 

new. target 


13.5 语法 陷阱 


有 几 个 语法 相关 的 细节 问题 可 能 会 给 你 带 来 硫 烦 。 


13.5.1 箭头 了 叉 数 绑 得 非常 松散 


箭头 函数 绑 得 非常 松散 。 原 因 是 硕 望 每 一 个 能 在 表达 式 体 中 出 现 的 表达 式 都 “ 紧 紧 结 
合 在 一 起 ”， 但 是 实际 上 另 一 个 表达 式 比 箭头 函数 结合 性 更 高 。 


结果 ， 在 其 它 菜 些 地 方 ， 经 常 不 得 不 将 箭头 函数 包 右 在 小 括号 中 。 例 如 : 


console.log(typeof () => {}); // SyntaxError 
console.log(typeof (() => {})); // OK 


另 一 方面 ， 可 以 使 用 typeof 作为 一 个 表达 式 体 ， 不 用 放 在 大 括号 中 : 


const f = x => typeof x; 


13.5.2 立即 调用 的 箭头 函数 


还 记得 立即 调用 元 数 表 达 式 ( |IFEs ) 吗 ? 在 ECMAScript 5 中 用 于 模拟 块 级 作用 
域 和 值 返回 块 ， 看 起 来 像 下 面 这 样 : 


(function () { // open IIFE 
// inside IIFE 
}()); // close IIFE 


如 果 使 用 立即 调用 的 箭头 函数 〈 1AF ) ， 可 以 省 掉 几 个 字符 : 


(() => 【{ 
mekUne ls 
})(); 


和 IIFEs 类 似 ， 应 该 在 ||AFs 结尾 加 上 分 好 (或 者 使 用 一 个 等 价 的 措施 ) ， 以 避 
免 两 个 连续 的 ||AFs 被 解释 成 一 个 函数 调用 (第 一 个 是 函数 ， 第 二 个 是 参数 ) 。 


即便 ||AF 有 一 个 块 体 ， 也 必须 使 用 小 括号 包 衰 起 来 ， 因 为 它 结合 松散 ， 不 能 (直接 
地 ) 做 函数 调用 。 注 意 小 括号 一 定 是 包 住 了 箭头 元 数 。 使 用 |IFEs ， 你 有 一 个 
先 择 : 用 小 括号 要 么 包 住 整个 语句 ， 要 么 包 住 函数 表达 式 。 


就 像 上 节 提 到 的 ， 箭 头 函数 结合 松散 ， 这 对 于 表达 式 体 很 有 用 ， 比 如 你 想 让 这 种 表 
达 式 : 


const value = () => foo() 


解释 成 这 样 : 


const Value 


() => (foo()) 
而 不 是 这 样 : 
const value = (() => foo)() 
本 章 关 于 可 调用 实体 的 那 一 节 有 更 多 关于 在 ES6 中 使 用 |IFEs 和 |IFASs 的 信息 。 
13.5.4 不 能 用 语句 作为 表达 式 体 
13.5.4.1 表达 式 与 语句 


快速 复习 (参阅 《Speaking JavaScript 》 获 取 更 多 相关 信息 ) 
表达 式 产 生 (执行 得 到 ) 值 。 例 子 : 
< 


foo(7) 
'abc' .length 


while (true) (人 } 
netunnn L233. 


大 多 数 表 达 式 可 以 被 用 作 语 句 ， 简 单 地 将 它们 放 在 语句 的 位 置 上 : 
Punetaonnbarl ee 
3 + 4; 


foo(7); 
'abc' .length; 


13.5.4.2 前头 函数 体 


如 果 箭 头 函 数 体 是 一 个 表达 式 ， 那 么 就 可 以 不 需要 括号 了 : 


asyncFunc .then(x => Console.1og(Xx) ); 


但 是 ， 语 句 一 定 要 放 在 括号 里 面 : 


asyncFunc.catch(x => { throw x }); 


13.5.5 返回 一 个 对 象 字面 量 


有 一 个 块 体 而 不 是 一 个 表达 式 体 意味 着 如 果 你 想 让 表达 式 体 是 一 个 对 象 字 面 量 ， 就 
必须 将 其 放 在 括号 中 。 


箭头 函数 体 是 一 个 带 有 bar 的 标签 和 123 的 表达 式 语句 。 
let f = x => { bar: 123 } 
箭头 函数 体 是 一 个 表达 式 ， 一 个 对 象 字 面 量 : 


let f = x => ({ bar: 123 }) 


13.6 箭头 函数 与 第 规 函 数 对 比 


一 个 箭头 隐 数 与 一 个 普通 的 函数 在 两 个 方面 不 一 样 : 


e。 下 列 变量 的 构造 是 词法 的 : arguments ， super ， this ， 
new,target 

e 不 能 被 用 作 构 造 函 数 : 没有 内 部 方法 [[Construct]] 《该 方法 允许 普通 的 
函数 通过 new 调用 ) ， 也 没有 prototype 属性。 因此， 
new (() => {}) 会 抛 出 错误 。 


除了 那些 意外 ， 箭 头 函 数 和 普通 的 函数 没有 明显 的 区 别 。 例 如 ， typeof 和 
re 产生 同样 的 结果 : 


> typeof () => {} 

'function' 

> () => {} instanceof Function 
true 


> typeof function () 人 0 

'function' 

> function () {} instanceof Function 
true 


参阅 可 调用 实体 的 那 一 章 ， 获 取 更 多 关于 什么 时 候 使 用 箭头 函数 和 什么 时 候 使 用 传 
统 函 数 的 信息 。 


函数 表达 式 和 对 象 字面 量 是 例外 ， 这 种 情形 下 必须 放 在 括号 里 面 ， 因 为 它们 看 起 来 
像 是 函数 声明 和 代码 块 。 


14 除 类 之 外 的 新 的 面向 对 得 特性 


类 (在 下 一 章 讲解 ) 是 ECMAScript 6 中 主要 的 新 的 OOP 特性 。 但 是 ， 也 有 一 些 
对 象 字 面 量 的 新 特性 ， 和 0bject 上 的 新 的 实用 方法 ， 本 章 将 会 讲解 这 些 内容 。 


14.1 概览 


14.1.1 新 的 对 象 字面 量 特性 
方法 定义 : 


let obj = { 
myMethod(x, y) { 
} 

}; 


属性 值 缩写 : 


let first = 'Jane'; 
let last = 'Doe'; 


let obj = { first, last }; 


// Same as: 
let obj = { first: first, last: last }; 


计算 属性 键 : 


let propKey = 'foo'; 
let obj = { 
[propKey]: true, 
[bo tam 23 
}; 


这 种 新 语法 也 可 用 于 方法 定义 : 


let obj = { 
本 memioi 全 更 
return 'hi'; 
} 
}; 


console.log(obj.hello()); // hi 
计算 属性 键 主 要 的 应 用 场景 就 是 使 symbol 成 为 属性 键 变 得 更 加 方便 。 


14.1.2 Object 中 的 新 方法 


Object 中 最 重要 的 新 方法 是 assign() 。 习 惯 上 ， 在 JavaScript 的 世界 中 ， 
这 个 函数 叫做 extend() 。 0bject.assign() 仅 考 虑 自 有 【( 非 继承 ) 属性 。 


let obj = { foo: 123 }; 

Object.assign(ob]j, { bar: true }); 

console.1log(JSON.stringify(ob]j)); 
WH OO 2 an cote 


14.2 对 象 字 面 量 的 新 特性 


14.2.1 方法 定义 


在 ECMAScript 5 中 ， 方 法 是 值 为 函数 的 属性 : 


Var obj = { 
myMethod: function (x, y) { 


} 
je 


在 ECMAScript 6 中 ， 方 法 仍然 是 函数 值 属 性 ， 但 是 现在 多 了 一 种 定义 方法 的 方 


式 : 


let obj = { 
myMethod(x, y) { 
} 

}; 


getters 和 setters 仍然 和 ECMAScript 5 中 一 样 有 效 ( 注意 在 语法 上 和 方法 定义 是 
如 何 相似 的 ) 


let obj = { 
get foo() { 
console.log( GET foo ),; 
nietGunn 23» 
}, 
set bar(value) { 
console.log('SET bar to '+value); 
// return value is ignored 
} 
}; 


使 用 obj 


> obj.foo 

GET foo 

3 

> obj.bar = true 
SET bar to true 
true 


也 有 一 种 简明 的 方式 定义 值 为 生成 器 函数 的 属性 : 


let obj = { 
* myGeneratorMethod() { 
} 

}; 

上 述 代码 等 价 于 : 

let obj = { 
myGeneratorMethod: function* () { 
} 

}; 


14.2.2 属性 值 缩写 


属性 值 简称 使 你 在 对 象 字面 量 中 简写 属性 的 定义 : 如 果 用 于 指定 属性 值 的 变量 名 字 
也 是 属性 键 ， 则 可 以 省 略 键 。 看 起 来 像 下 面 这 样 : 


属性 值 简称 也 可 以 用 于 解构 : 
Veerob x 4 
let {x,y} = obj; 


console.log(x); // 4 
console.log(y); // 1 


属性 值 简称 的 使 用 场景 之 一 就 是 多 值 返回 〈 在 解构 那 一 章 讲解 了 ) 。 


14.2.3 计算 的 属性 键 
记 住 在 设置 属性 的 时 候 ， 有 两 种 方法 指定 一 个 键 。 


e@ 1、 通 过 一 个 固定 的 名 字 : obj.foo = true ; 


e 2、 通 过 表达 式 : obj['b' + 'ar'] =123 


在 对 象 字 面 量 中 ，ECMAScript 5 只 能 使 用 第 一 种 方式 。ECMAScript 6 提供 了 可 
选 的 第 二 种 方式 : 


let propKey = 'foo'; 
let obj = { 
[propKey]: true, 
[Clon bl 2 
}; 


新 的 语法 也 可 以 用 于 方法 定义 : 


let obj = { 
['h'+'ello']() Hi 
Eeeuian ha 
} 
}; 


console.log(obj.hello()); // hi 


计算 属性 键 的 主要 使 用 场景 是 Symbol : 可 以 定义 一 个 公开 的 symbol ， 然 后 使 用 
它 作为 特殊 的 属性 键 ， 该 键 总 是 唯一 的 。 一 个 出 名 的 例子 就 是 存储 在 
Symbol.iterator 中 的 Symbol 。 如 果 某 个 对 象 有 一 个 方法 的 键 是 
Symbol.iterator ， 那 么 这 个 对 象 就 变 成 了 可 和 迭代 的 对 象 ; 这 个 方法 必须 返回 一 
个 和 迭代 器 ， 该 迭代 器 用 于 在 for-of 循环 等 地 方 欠 代 这 个 对 象 。 下 面 的 代码 展示 
了 这 是 怎么 运作 的 。 


let obj = { 
* [Symbol.iterator]() { // (A) 
yield 'hello'; 
yield ‘world'; 


} 

jeg 

for (let x of obj) { 
console.1log(x); 


/OUtouE: 
// hello 
// world 


行 A 以 一 个 计算 键 (存储 在 Symbol.iterator 中 的 Symbol ) 开始 生成 器 函数 
的 定义 。 


14.3 新 的 Object 方法 


14.3.1 
Object.assign(target, source 1, source 2, :..) 


该 方法 将 源 数据 ( source ) 合并 到 目标 数据 ( target ) 中 去 : 会 修改 target 
， 第 一 步 拷 贝 source 1 上 所 有 的 可 枚 举 自 有 属性 到 target ， 然 后 是 
Source 2  ， 以 此 类 推 。 最 后 ， 返回 目标 数据 。 


let obj = { foo: 123 }; 

Object.assign(ob]j, { bar: true }); 

console. so Stringify(obj ) ) ， 
lioo0 2 a ue 


让 我 们 更 近 距 离 地 看 下 0bject.assign() 是 如 何 运作 的 : 


e。 两 种 属性 键 : 0bject.assign() 支持 字符 串 和 Symbol 作为 属性 键 。 

@ 仅 操 作 可 枚 举 的 自 有 属性 : 0bject.assign() 忽略 继承 的 属性 和 不 可 枚 举 
的 属性 。 

@ 通过 赋值 来 拷贝 : 在 目标 对 象 中 的 属性 通过 赋值 (内 部 操作 [[Put]] ) 来 创建 。 
这 意味 着 如 果 target 上 有 ( 自 有 的 或 继承 的 ) setters ， 在 拷贝 的 时 候 会 被 
调用 。 另 一 种 可 选 的 定义 新 属性 的 方式 就 是 始终 创建 新 的 属性 ， 而 不 调用 
setters 。 本 来 有 人 提议 让 Object.assign() 也 支持 使 用 定义 而 不 是 赋值 的 

方式 ， 这 个 建议 最 终 在 ECMAScript 6 中 被 拒绝 了 ， 但 是 可 能 在 后 面 的 版 本 中 
会 重新 考虑 。 
@ 不 能 移动 使 用 super 的 方法 : 这 样 的 方法 有 一 个 内 部 属性 
[[Homeobject]] ， 该 属性 将 该 方法 与 创建 该 方法 的 时 候 所 在 的 对 象 绑 定 起 
来 。 如 果 通 过 Object,assign() 移动 这 个 方法 ， 该 方法 将 会 保持 和 原 对 象 
的 这 种 绑 定 。 详 细 内 容 在 本 章 关 于 类 的 那 一 节 讲 解 。 


14.3.1.1 object.assign() 的 使 用 场景 
让 我 们 看 几 个 使 用 场景 。 
14.3.1.1.1 给 this 添加 属性 


在 构造 器 中 可 以 使 用 Object.assign() 给 this 添加 属性 : 


class Ponmted 
constructor(x, y) { 
Object.assign(this, {x, y}); 
} 


14.3.1.1.2 给 对 象 属性 提供 默认 值 
0bject.assign() 在 给 缺失 的 属性 填充 默认 值 的 时 候 也 很 有 用 。 在 下面 的 例子 
中 ， 有 一 个 带 有 默认 值 的 对 象 DEFAULTS 和 一 个 带 有 数据 的 对 象 options 。 


const DEFAULTS = { 
logLevel: 0, 
outputFormat: ‘html' 
}; 
function processContent(options) { 
options = Object.assign({}, DEFAULTS, options); // (A) 


在 行 A， 创 建 了 一 个 新 的 对 象 ， 把 默认 属性 拷贝 过 来 ， 然 后 把 options 上 面 的 
属性 找 贝 过 来 ， 履 盖 默 认 值 。 0bject.assign() 返回 这 些 操作 的 结果 ， 然 后 赋 
值 给 options 。 


14.3.1.1.3 给 对 象 添加 方法 
另 一 个 使 用 场景 就 是 给 对 象 添加 方法 : 


Object.assign(SomeClass.prototype, { 
SomeMethod(arg1，arg2) { 


}, 
anotherMethod() { 


} 
}); 


也 可 以 手动 地 将 函数 赋值 上 去 ， 但 是 这 样 写 出 来 的 代码 就 没 那 么 漂亮 了 ， 并 且 每 次 
都 需要 写 一 遍 SomeClass.prototype 
SomeClass.prototype.someMethod = function (arg1，arg2) { 


}; 
SomeClass.prototype.anotherMethod = function () { 
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14.3.1.1.4 克隆 对 象 
最 后 一 个 0bject.assign() 的 使 用 场景 就 是 快速 克隆 对 象 : 


function clone(orig) { 
return Object.assign({}, orig); 
} 


这 种 克隆 方式 某 种 程度 上 来 讲 是 不 完美 的 ， 因 为 并 不 会 保持 orig 的 属性 特性 
(可 写 、 可 枚 举 等 ) 。 如 果 这 是 你 想 要 的 ， 就 必须 使 用 属性 描述 器 ( property 
descriptors ) 了 。 


如 果 想 让 克隆 出 来 的 对 象 和 原 对 象 有 相同 的 原型 ， 可 以 使 用 
object ,getPrototypeof() 和 0object.create() 


function clone(orig) { 
let origProto = Object.getPrototypeof(orig); 
return Object.assign(Object.create(origProto), orig); 


14.3.2 Object.getOwnPropertySymbols(ob]j) 
0bject.getOwnPropertySymbols(obj) 获取 obj 上 所 有 自 有 的 为 Symbol 的 


键 。 它 补充 了 0bject.,getOwnPropertyNames() ， 这 个 方法 获取 自 有 的 字符 串 
形式 的 键 。 后 面 的 一 节 中 详细 讲解 了 和 迭代 属性 键 的 知识 。 


14.3.3 Object.is(value1, value2) 
严格 相等 操作 符 (===) 处 理 两 个 值 的 结果 可 能 不 是 想象 中 的 那样 。 
首先 ， NaN 和 自身 不 相等 。 


> NaN === NaN 
false 


这 很 不 幸 ， 因 为 这 经 常 阻止 我 们 检测 NaN 


> [0,NaN,2].indexof(NaN ) 
= 和 


其 次 ，JavaScript 有 两 种 零 值 ， 但 是 在 严格 模式 下 处 理 结果 看 起 来 似乎 是 同一 个 
值 : 


> -0 === +0 
true 


这 样 做 通常 情况 下 是 好 的 。 
0bject.,is() 提供 了 一 种 相对 于 === 明确 一 点 的 比较 值 的 方式 。 如 下 所 示 : 


> Object.is(NaN, NaN) 
true 

> Object.is(-0, +0) 
false 


其 它 所 有 的 比较 结果 都 和 === 一 样 。 


14.3.3.1 使 用 object.is() 查找 数组 元 素 


如 果 将 0bject.is() 和 新 的 ES6 数组 方法 findIndex() 结合 起 来 ， 可 以 找 
到 数组 中 的 NaN 


function myIndexof(arr，elem) { 
return arr.findIndex(x => Object.is(x, elem)); 
} 


myIndexof([0,NaN,2], NaN); // 1 


相 比 之 下 ， indexof() 并 不 能 很 好 地 处 理 NaN 


> [0,NaN,2].indexof(NaN ) 
= 二 


14.3.4 Object.setPrototypeof (ob]j, proto) 


该 方法 将 obj 的 原型 设置 为 proto 。 在 ECMAScript 5 中 有 一 种 非 标准 的 方 
式 ， 这 种 方式 被 很 多 引擎 支持 ， 就 是 通过 给 特殊 的 属性 ”proto 赋值。 推荐 
的 设置 原型 的 方式 还 是 与 在 ECMAScript 5 中 使 用 的 一 样 : 通过 
0bject.create() 创建 对 象 。 这 总 是 比 先 创建 对 象 再 设置 原型 的 方式 快 。 很 明 
显 ， 这 种 方式 在 想 要 改变 已 有 对 象 的 原型 的 时 候 是 不 行 的 。 


14.4 ES6 中 遍历 属性 键 
在 ECMAScript 5 中 ， 一 个 属性 的 键 可 以 是 字符 串 或 者 Symbol 。 现 在 有 五 种 工具 
方法 从 obj 对 象 中 获取 属性 键 : 
e Object.keys(obj) : Array<string> 
获取 所 有 可 枚 举 的 自 有 《 非 继 承 ) 属性 的 字符 串 键 。 
e 0Object.getownpPropertyNames(obj) : Array<string> 
获取 所 有 自 有 属性 的 字符 串 键 。 
e Object,getownPropertySymbols(obj) : Array<symbol> 
获取 所 有 自 有 属性 的 Symbol 键 。 
e Reflect.ownKeys(obj) : Array<string|symbol> 
获取 所 有 自 有 属性 的 键 。 
e Reflect.enumerate(obj) : Iterator 


获取 所 有 可 枚 举 属性 的 字符 串 键 。 


14.4.1 属性 键 的 迭代 顺 友 


所 有 和 迭代 属性 键 的 方法 都 是 一 样 的 顺序 : 


。 首 先是 所 有 的 数组 索引 ， 按 照 数字 排序 。 
。 然后 是 所 有 字符 囊 键 ( 非 索引 ) ， 按 照 创 建 的 顺序 。 
。 然后 是 所 有 Symbol ， 按 照 创建 的 顺序 。 


注意 ， 语 言 规范 把 索引 定义 为 a 当 转 换 成 无 符号 整数 然后 再 转换 回来 ， 仍 
然 是 同样 的 字符 囊 (同样 也 必须 比 23 1 ， 因 此 数组 是 有 长 度 限制 的 ) 。 这 意味 
着 规范 把 数组 索引 看 作 字 符 串 键 ， 甚 至 普通 的 对 象 都 可 以 有 数组 索引 : 


> Reflect.ownKeys({ [Symbol()]:0，b:0，10:0，2:0，a:0 }) 
[230 /10 bea Symow(e)d 


14.4 ES6 中 遍历 属性 键 


为 什么 规范 要 标准 化 属性 键 返回 的 顺序 ? 
Tab Atkins Jr. 的 回答 : 


因为 ， 至 少 对 于 对 象 ， 所 有 在 使 用 中 的 实现 返回 的 顺序 大 致 和 当前 的 规范 一 
样 ， 并 且 大 量 的 代码 无 形 中 就 写成 了 依赖 这 种 顺序 的 形式 ， 如 果 用 不 同 的 顺序 
来 枚 举 的 话 ， 将 会 造成 破坏 。 了 既然 浏览 器 必须 要 实现 这 种 特定 的 顺序 来 变 得 
Web 兼容 ， 那 么 规范 就 要 做 这 种 顺序 要 求 。 


有 一 些 关 于 从 Map/Set 中 打破 这 种 顺序 的 讨论 ， 但 是 这 样 做 的 话 就 需要 我 们 指 
定 一 种 代码 无 法 依赖 的 顺序 ; 换 名 话说 ， 我 们 必须 让 顺序 是 随机 的 ， 而 不 是 非 
指定 的 。 这 要 做 更 多 的 努力 ， 并 且 创 建 顺序 是 很 合理 的 (例如 ， 参 考 Python 
中 的 OrderedDict ) ， 因 此 决定 让 Map 和 Set 和 Object 一 样 。 

规范 中 有 两 部 分 和 本 节 有 关 : 


e 关于 带 有 数组 感觉 的 对 象 那 一 节 提 到 了 什么 是 数组 索引 。 | 
@ 关于 内 部 方法 [OwnPropertyKeys]] 的 那 一 节 定 义 了 属性 返回 的 顺序 。 
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14.5 常见 问题 的 解答 : 对 象 字 面 量 


14.5.1 可 以 再 对 象 字 面 量 中 使 用 Super 四 ? 
是 的 ， 可 以 |! 详细 内 容 在 关于 类 的 那 一 章 讲 解 。 
对 象 的 自 有 属性 就 是 那些 不 是 从 原型 链 中 继承 的 属性 。 


Cn 
状 


1 


本 章 讲解 了 ES6 的 类 是 如 何 运作 的 。 


15.1 概览 
类 和 子 类 : 


class Point { 
constructor(x, y) { 
nase>xX =x 
this.y = y; 


toString() { 
returne (Sathishis Vy) 
} 


} 


class ColorPoint extends Point { 
constructor(x, y, color) { 
super (x, y); 
this.color = color; 
} 
tostring() { 
return super.toString() + ' in ' + this.color,; 


} 
} 
在 背后 ，ES6 类 不 是 一 个 全 新 的 东西 : 主要 提供 了 更 多 方便 的 语法 去 创建 老式 的 
构造 器 函数 。 如 果 使 用 typeof 可 以 看 到 : 


> typeof Point 
'function' 


使 用 类 : 


> let cp = new ColorPoint(25, 8, 'green ' ) 


> cp.tostring(); 
'(25, 8) in green' 


> cp instanceof ColorPoint 
true 

> cp instanceof Point 

true 


15.1 概览 
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15.2 要 点 


15.2.1 基 类 


在 ECMAScript6 ( ES6 ) 中 ， 类 像 这 样 定义 : 


class Point { 
constructor(x, y) { 
laln se Sa Sp 
this.y = y; 


} 
toString() { 

hetunmm (Ph x Pas 
} 


这 个 类 使 用 起 来 就 像 一 个 ES5 的 构造 器 函数 一 样 : 


> var p = new Point(25, 8); 
> p.toSstring() 
' (25, 8)' 


实际 上 ， 类 定义 的 结果 就 是 一 个 函数 : 


> typeof Point 
'function' 


然而 ， 只 能 通过 new 调用 类 ， 不 能 通过 函数 调用 (原理 在 后 面 解 释 ) 


> Point() 
TypeError: Classes can’t be function-called 


在 规范 中 ， 类 以 函数 调用 方式 使 用 的 时 候 ， 会 被 函数 对 象 内 部 的 方法 [[Call]] 阻 
止 。 


15.2.1.1 类 声明 不 会 被 提升 


函数 声明 会 被 提升 : 当 进 入 一 个 作用 域 的 时 候 ， 声 明 在 里 面 的 函数 马上 就 可 用 了 - 
不 管 函数 声明 在 哪个 位 置 。 这 意味 着 可 以 在 函数 声明 之 前 调用 : 


foo(); // works, because ‘foo is hoisted 

function foo() {} 
相对 地 ， 类 声明 不 会 提升 。 因 此 ， 仅 在 执行 到 类 定义 的 地 方 ， 并 且 执 行 完 类 定义 代 
码 ， 类 才 会 存在 。 在 类 声明 之 前 访问 类 会 抛 出 ReferenceError 错误 : 

new Foo(); // ReferenceError 

class Foo {} 
这 种 限制 的 原因 是 类 可 以 有 一 个 继承 子 句 ， 子 名 的 值 是 任意 表达 式 。 这 个 表达 式 
必须 在 正确 的 “地 方 "被 执行 ， 它 的 执行 不 能 被 提升 。 
没有 提升 功能 导致 的 限制 可 能 比 你 想象 要 少 。 例 如 ， 在 类 声明 前 面 的 函数 依然 能 够 
访问 那个 类 ， 但 是 必须 要 等 到 类 声明 已 经 被 执行 掉 之 后 才能 调用 这 个 函数 。 


function functionThatUsesBar() { 
new Bar(); 


functionThatUsesBar(); // ReferenceError 
class Bar {} 
functionThatUsesBar(); // OK 


15.2.1.2 类 表达 式 
与 函数 类 似 ， 有 两 种 类 定义 ， 两 种 方式 定义 一 个 类 : 类 声明 和 类 表达 式 。 
同样 地 类 似 于 函数 ， 类 表达 式 的 标识 符 仅 在 当前 表达 式 中 可 见 : 

const MyClass = class Me { 


getCclassName() { 
return Me.name; 
} 
}; 


let inst = new MyClass(); 
console.log(inst.getClassName()); // Me 
console.log(Me.name); // ReferenceError: Me is not defined 


15.2.2 在 类 定义 的 主体 内 部 


类 的 主体 只 能 包含 方法 ， 不 能 有 数据 属性 。 原 型 上 面 的 数据 属性 一 般 会 被 认为 是 反 
模式 ， 因 此 这 种 做 法 仅 强制 执行 了 一 种 最 佳 实践 。 


15.2.2.1 构造 器 ， 静 态 方 法 ， 原 型 方法 
让 我 们 检测 一 下 类 定义 中 常见 的 三 种 方法 : 
class E00 
constructor(prop) { 


this.prop = prop; 


static staticMethod() { 
return 'classy'; 


prototypeMethod() { 
return 'prototypical'; 
} 


let foo = new Foo(123); 


该 类 声明 的 对 象 图 看 起 来 像 下 面 这 样 。 理 解 此 图 的 小 提示 : [[Prototype]] 在 
对 象 之 间 是 继承 关系 ， prototype 是 一 个 普通 的 值 为 对 多 的 属性 。 属 性 


prototype 仅仅 是 比较 特殊 ， 因 为 new 操作 符 使 用 它 的 值 作为 新 创建 实例 的 原 
型 。 


首先 ， 伪 方法 constructor 。 这 个 方法 很 特殊 ， 它 定义 了 代表 这 个 类 的 函数 : 


> Foo === Foo.prototype.constructor 
true 

> typeof Foo 

'function' 


有 时 称 它 为 类 构造 器 。 它 有 一 些 普通 构造 器 函数 所 不 具备 的 特性 〈 主 要 是 能 通过 
super() 调用 父 构 造 器 ， 这 在 后 面 讲解 ) 。 


其 次 ， 静 态 方 法 。 静 态 属 性 (或 者 说 是 类 属性 ) 就 是 Foo 自身 上 面 的 属性 。 如 果 
定义 方法 的 时 候 在 前 面 加 上 static ， 就 创建 了 一 个 类 方法 : 


> typeof Foo.staticMethod 
'function' 

> Foo.staticMethod() 
'classy' 


第 三 点 ， 原 型 方法 。 Foo 的 原型 属性 就 是 Foo.prototype 的 属性 。 它 们 是 常 
用 的 方法 ， 并 被 Foo 的 实例 继承 。 


> typeof Foo.prototype.prototypeMethod 
'function' 

> foo.prototypeMethod() 

'prototypical' 


15.2.2.2 静态 数据 属性 
到 目前 为 止 ， 类 只 允许 创建 静态 方法 ， 不 能 创建 静态 数据 属性 。 有 两 种 方法 可 以 解 


决 这 个 问题 。 


第 一 个 ， 可 以 手动 地 添加 一 个 静态 属性 : 


class Point { 
constructor(x, y) { 
this.x XX 
this.y = y; 


} 


Point.ZERO = new Point(0, 0); 


第 二 个 ， 创 建 一 个 静态 的 getter : 


class Point { 
constructor(x, y) { 
this.x xX 
this.y = y; 


} 
static get ZERO() { 

return new Point(0, 0); 
} 


在 两 种 场景 中 ， 都 得 到 一 个 能 读 取 的 属性 Point.ZERO 。 在 第 一 种 方法 中 ， 可 以 
使 用 Object,.defineproperty() 创建 一 个 只 读 的 属性 ， 但 是 我 喜欢 赋值 的 简洁 
性 Lo) 


15.2.2.3 getters 和 setters 


getters 和 setters 的 语法 和 ECMAScritp 5 中 的 对 象 字 面 量 语 法 是 类 似 的 : 


class MyClass { 


get prop() { 
return 'getter'; 


set prop(value) { 
console.log('setter: '+value); 
} 


你 可 以 像 下 面 这 样 使 用 MyClass 。 


> let inst = new MyClass(); 
> inst.prop = 123; 


setter: 123 
> inst.prop 
'getter' 


15.2.2.4 计算 的 方法 名 字 


可 以 通过 表达 式 定义 方法 名 字 ， 需 要 把 表达 式 放 在 一 对 中 括号 中 。 例 如 ， 下 面 定 义 
Foo 的 所 有 方式 都 是 等 价 的 。 


class Foo() { 
myMethod() {} 
} 


class Foo() { 
['my'+'Method']() 人 QD 


const m = 'myMethod'，; 
Class Foo() { 
[m]() {} 


ECMAScript 6 中 有 几 个 特殊 的 方法 ， 这 些 方 法 的 键 是 Symbol 。 计 算 方法 名 字 让 

你 能 够 定义 这 种 方法 。 例 如 ， 如 果 一 个 对 象 有 一 个 方法 ， 这 个 方法 的 键 是 
Symbol.iterator ， 那 么 这 个 对 象 就 是 可 和 迭代 的 。 这 意味 着 它 的 内 容 可 以 通过 
for-of 循环 和 其 它 语言 机 制 来 迭代。 


class IterableClass { 
[Symbol.iterator]() { 


} 


15.2.2.5 生成 器 函数 


如 果 在 方法 定义 的 时 候 加 上 一 个 星 号 前 组， 那么 这 个 方法 就 会 变 成 生成 器 方法 。 在 
其 它 方面 ， 生 成 器 对 于 定义 键 是 Symbol.iterator 的 方法 是 很 有 用 的 。 下 面 的 
代码 展示 了 如 何 运 作 。 


class IterableArguments { 
constructor(...args) { 
this.args = args; 


} 
* [Symbol.iterator]() { 


for (let arg of this.args) { 
yield arg; 
} 


} 


for (let x of new IterableArguments('hello', 'world')) { 
console.1log(x); 
} 


// Output: 
// hello 
// world 


15.2.3 子 类 


继承 子 句 让 你 能 够 创建 已 有 构造 器 (这 个 构造 器 可 能 是 通过 类 的 形式 创建 的 ， 也 可 
能 不 是 ) 的 子 类 : 


class Point { 
constructor(x, y) { 
this.x XX 
this.y = y; 


} 
toString() { 

neturm (Senhas x Senhase vy 
} 


} 


class ColorPoint extends Point { 
constructor(x, y, color) { 
super (x, y); // (A) 
this.color = color; 


} 
toString() { 

return super.toString() + " in ' + this.color; // (B) 
} 


该 类 的 使 用 和 想象 的 一 样 : 


> let cp = new ColorPoint(25, 8, 'green ' ) 
> cp.toString() 
'(25, 8) in green' 


> cp instanceof ColorPoint 
true 

> cp instanceof Point 

true 


有 两 种 类 : 
e@ Point 是 一 个 基 类 ， 因 为 它 没有 继承 子 押 。 
e ColorPoint 是 一 个 继承 类 。 


有 两 种 使 用 super 的 方式 : 


@ 在 类 构造 器 (类 定义 中 的 伪 方 法 constructor ) 中 使 用 它 就 像 方法 调用 一 
样 ( super(...) ) ， 用 于 调用 父 构造 器 〈 行 A) 。 

e@ 在 方法 定义 【在 对 象 字面 量 或 者 类 中 ， 带 有 或 者 不 带 static ) 中 使 用 它 就 
像 属 性 引用 ( ”super.prop 或 者 方法 调用 ( super.method(...) ) ) ， 
用 于 访问 父 属 性 ( 行 B) 。 


15.2.3.1 子 类 的 原型 是 父 类 


在 ECMAScript 6 中 ， 子 类 的 原型 是 父 类 : 


> Object ,getPrototypeof(ColorPoint) === Point 
true 


这 意味 着 静态 属性 是 会 被 继承 的 : 


class Foo { 
static classMethod() { 
return 'hello'; 


} 
} 
class Bar extends Foo { 
} 


Bar.classMethod(); // ‘hello' 


甚至 可 以 通过 super 调用 父 类 中 的 静态 方法 : 


class Foo { 
static classMethod() { 
return 'hello'; 
} 


} 


class Bar extends Foo { 
static classMethod() { 
return super.classMethod() + ', too'; 
} 
} 


Bar.classMethod(); // 'hello, too' 


15.2.3.2 父 构造 器 调用 


在 一 个 继承 类 里 面 ， super() 调用 必须 先 于 this 的 使 用 : 


class Foo {0} 


class Bar extends Foo { 
constructor(num) { 
let tmp = num * 2; // OK 
this.num = num; // ReferenceError 
super(); 
this.num = num; // OK 


在 继承 的 构造 器 中 不 调用 super() 也 会 造成 错误 : 


Class Foo {} 


class Bar extends Foo { 
constructor() { 


} 


let bar = new Bar(); // ReferenceError 


15.2.3.3 入 盖 构 造 器 的 结果 


就 像 在 ES5 中 一 样 ， 可 以 通过 显示 地 返回 一 个 对 象 来 覆盖 构造 器 的 结果 : 


class Foo { 
constructor() { 
return Object.create(null]l); 
} 


console.log(new Foo() instanceof Foo); // false 


如 果 这 样 做 了 ， 那 么 this 是 否 已 经 被 初始 化 都 没关系 了 。 换 句 话说 ， 如 果 用 这 
种 方式 覆盖 结果 ， 那 么 在 继承 的 构造 函数 中 没 必要 调用 super() 方法 了 。 


15.2.3.4 类 的 默认 构造 器 
如 果 没有 为 基 类 指定 构造 器 ， 那 么 会 使 用 下 面 的 定义 : 


constructor() 人 


对 于 继承 类 ， 会 使 用 下 面 的 默认 构造 器 : 


constructor(...args) { 
super(...args); 


15.2.3.5 子 类 化 内 置 构造 器 


在 ECMAScript 6 中 ， 可 以 继承 所 有 内 置 的 构造 器 ( ES5 中 有 相应 的 变通 手段 ， 但 
是 有 值得 注意 的 限制 ) 。 


例如 ， 现 在 可 以 创建 自己 的 异常 类 《在 大 多 数 引 擎 中 会 继承 堆栈 特性 ) 


class MyError extends Error { 


} 


throw new MyError('Something happened!'); 


也 可 以 创建 Array 的 子 类 ， 该 子 类 也 会 正确 地 处 理 length 


class MyArray extends Array { 
constructor(len) { 
super (len); 
} 
} 


// Instances of of MyArray work like real Arrays: 
let myArr = new MyArray(0); 
console.log(myArr.length); // 0 

myArr[0] = 'foo'; 

console.log(myArr.length); // 1 


注意 ， 子 类 化 内 置 构造 器 需要 引擎 本 地 化 的 支持 ， 不 能 从 转换 器 中 得 到 这 个 特性 。 


15.3 类 的 细节 


我 们 到 目前 为 止 看 到 的 是 类 的 概要 。 如 果 对 类 的 背后 原理 感 兴 趣 ， 那 就 继续 阅读 下 
去 。 让 我 们 以 类 的 语法 开始 ， 下 面 是 一 个 来 自 于 《 Sect. A.4 of the ECMAScript 6 
specification 》 的 经 过 稍微 修改 的 版 本 。 


ClassDeclaration: 

"class" BindingIdentifier ClassTail 
ClassExpression: 

"class" BindingIdentifier? ClassTail 


ClassTail: 

ClassHeritage? "{" ClassBody? "}" 
ClassHeritage: 

"extends" AssignmentExpression 
ClassBody: 

ClassElement+ 
ClassElement: 

MethodDefinition 

"static" MethodDefinition 


ol 
7 


MethodDefinition: 
PropName "(" FormalParams ")" "{" FuncBody "}" 
"*" PropName "(" FormalParams ")" "{" GeneratorBody "}" 
"get" PropName 9 0 人 FuncBody eb 
"set" PropName "(" PropSetParams ")" "{" FuncBody "}" 


PropertyName: 
LiteralPropertyName 
ComputedPropertyName 
LiteralPropertyName : 
IdentifierName /* foo */ 
StringLiteral /* "foo" */ 
NumericLiteral /* 123.45, OxFF */ 
ComputedPropertyName : 
"[" Expression "]" 


观察 之 后 ， 得 出 两 个 结论 : 
。 被 继承 的 值 可 以 产生 于 任何 表达 式 ， 这 意味 着 可 以 写 出 如 下 的 代码 : 


class Foo extends combine(MyMixin, MySuperClass) 1{} 


@ 允许 方法 之 间 有 分 号 。 


15.3.1 各 种 检查 


e@ 错误 检查 : 类 名 不 能 是 eval 或 arguments ; 类 元 素 名 字 不 允许 重复 ; 名 
字 constructor 只 能 作为 普通 的 方法 名 ， 不 外 用 作 getter 、setter 或 者 生 
成 器 方法 。 


e@ 类 不 能 像 函 数 一 样 调用 。 如 果 像 函数 一 样 调 用 ， 则 会 抛 出 TypeException 


异常 。 
@ 原型 方法 不 能 用 作 构 造 器 : 
class C 攻 
m() {} 


new C.prototype.m(); // TypeError 


15.3.2 属性 的 特性 ( Attributes of properties ) 
Class declarations create (mutable) let bindings. 对 于 一 个 给 定 的 类 Foo 


e。 静态 的 方法 Foo.* 是 可 写 的 和 可 配置 的 ， 但 不 可 枚 举 。 使 它们 可 写 就 允许 动 
态 赋值 。 
. 一 个 构造 造 器 和 它 的 属性 prototype 对 象 有 一 个 不 变 的 连接 : 


o Foo.prototype 是 不 可 写 的 ， 不 可 枚 举 的 ， 不 可 配置 的 。 
o Foo.prototype.constructor 是 不 可 写 的 ， 不 可 枚 举 的， 不 可 配置 
的 。 
@ 原型 方法 Foo.prototype.* 是 可 写 的 和 可 配置 的 ， 但 是 不 可 枚 举 。 


注意 在 对 象 字 面 量 中 的 方法 定义 会 产生 可 枚 举 的 属性 。 


15.4 子 类 的 细节 
在 ECMAScript 6 中 ， 子 类 看 起 来 像 下 面 这 样 。 


class Point { 
constructor(x, y) { 
nase>xX =x 
this.y = y; 


} 


class ColorPoint extends Point { 
constructor(x, y, color) { 
super (x, y); 
this.color = color; 


} 


let cp = new ColorPoint(25, 8, 'green'); 


这 段 代码 产生 下 面 的 对 象 。 


下 一 小 节 讲 解 原型 链 (上 图 中 的 两 列 ) ， 该 节 的 
内 存 和 初始 化 的 。 


计 


面 一 节 介 绍 了 cp 是 如 何 分 配 


15.4.1 原型 链 


上 上 图 中 ， 可 以 看 到 有 两 条 原型 链 〈 对 象 通过 [[Prototype]] 关系 连接 ， 该 关 
系 就 是 继承 关系 ) 


@e 左 侧 的 一 列 : 类 (函数 ) 。 继 承 类 的 原型 是 它 继承 的 类 。 基 类 的 原型 是 
Function,.prototype ， Function.prototype 也 是 函数 的 原型 : 


> Const getProto = Object.getPrototypeof .bind(Oobject ) ， 


> getProto(Point) === Function.prototype 

true 

> getProto(function () {}) === Function.prototype 
true 


e 右 侧 的 一 列 : 实例 的 原型 链 。 一 个 类 的 整个 目的 就 是 设置 这 条 原型 链 。 这 条 原 
型 链 以 0bject.prototype ( 0bject 的 原型 是 null ) 结束 ， 同 


时 ， Object.prototype 也 是 通过 对 象 字 面 量 创建 的 对 象 的 原型 : 


> const getProto = Object.getPrototypeof .bind(Oobject ) ; 


> getProto(Point.prototype) === Object.prototype 
true 

> getProto({}) === Object.prototype 

true 


图 中 左 侧 一 列表 明了 静态 方法 也 会 被 继承 。 


15.4.2 分 配 和 初始 化 实例 


类 构造 器 之 间 的 数据 流 和 ES5 规范 中 的 继承 方法 有 差异 。 实 际 上 ， 看 起 来 大 致 如 
下 所 示 : 


// Instance is allocated here 

puncenonnponme(X ve 
// Performed before entering this constructor: 
this = Object.create(new.target.prototype); 


this.x 
this.y 


Xj 
yr’ 


hunctonncolorponmtK ycolor en 
// Performed before entering this constructor: 
this = uninitialized; 


this = Reflect.construct(Point, [x, yj], new.target); // (A) 
/SUDen( YY) 


this.color = color; 


Object,.setPprototypeOof (ColorPoint, Point); 


let cp = Reflect.construct( // (B) 
ColorPoint, [25, 8, 'green'], 
ColorPoint); 
// let cp = new ColorPoint(25, 8, 'green'); 


在 ES6 和 ES5 中 ， 实 例 对 象 创建 的 地 方 不 一 样 : 


e 在 ES6 中， 在 基 类 的 构造 器 中 创建 ， 构 造 器 调用 链 的 末端 。 
e。 在 ES5 中 ， 在 new 操作 符 中 创建 ， 构 造 器 调用 链 的 始 端 。 


前 面 的 代码 使 用 了 两 个 新 的 ES6 特性 : 


new.target 是 一 个 隐 式 的 参数 ， 所 有 的 函数 都 有 。 它 用 于 构造 器 调用 ， 而 

this 用 于 方法 调用 。 

o 如 果 构 造 器 已 经 显示 地 通过 new 调用 了 ， 它 的 值 就 是 当前 构造 器 〈 行 B 
) o 

o 如 果 构 造 器 通过 super() 调用 ， 它 的 值 就 是 发 出 调用 的 构造 器 中 的 
new.target 〈 行 A) 。 

o 在 一 个 普通 的 函数 调用 中 ， 它 的 值 是 undefined 。 这 意味 着 可 以 使 用 
new.target 来 区 分 一 个 函数 是 否 被 当成 普通 函数 调用 还 是 被 当成 构造 
器 调用 (通过 new ) 。 

o 在 箭头 函数 内 部 ， new.target 指向 祖先 作用 域 中 最 近 的 一 个 非 箭头 函 
数 中 的 new.target 。 

Reflect .construct() 完成 构造 器 调用 ， 最 后 一 个 参数 用 于 指定 

new.target 。 


此 种 子 类 化 方式 的 优点 就 是 让 首 通 的 代码 能 够 子 类 化 内 置 的 构造 器 (比如 Error 


和 


15. 


15. 
让 我 


) 


Array ) 。 后 面 一 节 讲 解 了 为 什么 需要 一 种 不 同 的 方式 。 


4.2.1 安全 检查 


在 继承 的 构造 器 中 ， 如 果 在 super() 调用 之 前 就 访问 this ， 会 抛 出 错 

误 ， 因 为 此 时 实例 尚未 创建 ， this 尚未 初始 化 。 

一 旦 this 初始 化 了 ， 调 用 super() 就 会 产生 一 个 ReferenceError 错 
误 。 这 避免 了 调用 两 次 super() 的 问题 。 

如 果 构 造 器 隐 式 返回 (不 使 用 return ) ， 那 么 返回 结果 就 是 this 。 如 
果 this 未 被 初始 化 ， 会 抛 出 ReferenceError 错误 。 这 避免 了 忘记 调用 
super() 的 问题 。 

如 果 构 造 器 显示 地 返回 一 个 非 对 象 (包括 undefined 和 null ) ， 最 终 返 
回 结 果 就 是 this (这 种 行为 需要 保持 与 ES5 和 更 早 的 版 本 兼容 ) 。 如 果 

this 未 被 初始 化 ， 就 会 抛 出 TypeError 错误 。 

如 果 构 造 器 显示 地 返回 一 个 对 象 ， 该 对 象 会 被 用 作 最 终 返 回 结 果 。 此 时 

this 是 否 初始 化 已 经 没有 关系 了 。 


A 


4.2.2 extends 子 锌 


们 看 看 extends 子 名 是 如 何 影响 类 的 设置 的 〈 Sect. 14.5.14 of the spec 


extends 子 句 的 值 必须 是 “可 构造 的 ( constructible ) ”( 可 通过 new 调用 ) 。 
但 是 允许 为 null 。 


Glasseoelf 


} 


。 构造 器 类 型 : 基 类 构造 器 


C 的 原型 : Function.prototype (类 似 于 普通 的 函数 ) 


e。 C.prototype 的 原型 : 0bject.prototype (也 是 通过 对 象 字 面 量 创建 的 
对 象 的 原型 ) 


class C extends B { 


} 


e@ 构造 器 类 型 : 继承 造 器 
e C 的 原型 : B 
e。 C.prototype 的 原型 : B,prototype 


class C extends object { 


} 


e@ 构造 器 类 型 : 继承 构造 器 
e C 的 原型 : 0bject 
e。 C.prototype 的 原型 : 0bject.prototype 


注意 下 面 的 代码 与 第 一 种 情况 的 微妙 区 别 : 如 果 没 有 extends 子 句 ， 那 么 类 就 是 
职 累 并 且 负 责 创建 实例 。 ee TE ， 就 是 一 个 继承 类 ， 并 且 
GE 创建 实例 。 。 最终 的 实例 ( 包括 它们 的 原型 ) 都 是 一 样 的 ， 但 是 实例 构建 

过 程 是 不 一 样 的 。 


Class C extends null { 


} 


e@ 构造 器 类 型 : 继承 构造 器 
e。 C 的 原型 : Function.prototype 
e。 C.prototype 的 原型 : null 


这 种 类 就 避免 了 0bject.prototype 出 现在 原型 链 中 。 但 是 基本 没有 什么 用 。 并 
且 ， 必 须 得 小 心 : 通过 new ee ， 因 为 默认 的 构造 器 会 调用 
父 构 造 器 ， 而 Function.prototype 【〔 父 构造 器 ) 不 能 作为 构造 器 调用 。 唯 一 一 
种 避免 该 错 的 方式 是 添加 一 个 返回 对 象 的 构造 器 


class C extends nu]l1 { 
constructor() { 
let _this = Object.create(new.target.prototype); 
return _this; 


new.target 确保 C 能 正确 地 继承 - _this 的 原型 总 是 new 的 操作 数 。 


15.4.3 为 什么 在 ES5 中 不 能 子 类 化 内 置 构造 器 ? 


在 ECMAScript 5 中 ， 绝 大 多 数 构造 器 不 能 被 子 类 化 〈 有 几 种 迁 回 方法 ) 。 
要 理解 为 什么 ， 让 我 们 使 用 标准 的 ES5 方式 去 子 类 化 Array 。 我 们 将 会 很 快 看 
到 ， 这 是 不 行 的 。 

function MyArray(len) { 


Array.call(this, len); // (A) 
} 


MyArray.prototype = Object.create(Array.prototype); 


很 不 幸 ， 如 果实 例 化 MyArray ， 我 们 发 现 不 会 正确 地 工作 : 在 添加 元 素 的 时 候 ， 
实例 的 length 属性 并 不 会 自动 变化 : 


var myArr = new MyArray(0); 
myArr .length 


myArr[0] = "foo'; 
myArr .length 


©V VOVYV 


有 两 个 障碍 导致 myArr 无 法 成 为 一 个 正确 的 数组 。 


第 一 个 障碍 : 初始 化 。 传 递 给 构造 器 Array (行人 A 处 ) 的 this 会 被 忽略 。 这 
意味 着 不 能 使 用 Array 来 设置 MyArray 创建 的 实例 。 


> var a = []; 

> var b = Array.call(a, 3); 

>a !==b // a is ignored, b is a new object 
true 

> b.length // set up correctly 

3 

> a.length // unchanged 

0 


第 二 个 障碍 : 分 配 。 通 过 Array 创建 的 实例 对 象 是 特异 的 ( exotic ) ( 
ECMAScript 规范 使 用 这 个 术语 来 描述 那些 有 不 同 于 普通 对 象 特 性 的 对 象 ) 

Array 创建 的 实例 的 属性 length 追踪 和 影响 数组 元 素 的 管理 。 一 般 地 ， 可 以 
创建 特异 对 象 ， 但 是 不 能 将 一 个 已 存在 的 普通 对 象 转换 成 特意 对 象 。 不 幸 的 是 ， 这 
就 是 Array 必须 要 做 的 ， 在 行 A 执 行 的 时 候 : 必须 要 将 MyArray 创建 的 普通 
的 对 象 转 换 成 特异 对 象 。 


15.4.3.1 解决 方案 : ES6 的 子 类 化 


在 ECMAScript 6 中 ， 子 类 化 Array 看 起 来 像 下 面 这 样 : 


class MyArray extends Array { 
constructor(len) { 
super (len); 


} 


这 会 有 效 (但 是 转换 器 肯定 不 会 支持 ， 这 依赖 于 JavaScript 本 地 引擎 支持 ) 


let myArr = new MyArray(0); 
myArr.length 


myArr[0] = "foo'; 
myArr .length 


PV VOVYV 


现在 可 以 看 下 ES6 方式 的 子 类 化 是 怎么 绕 过 这 两 个 障碍 的 : 


e。 实例 创建 是 在 基 构 造 器 中 进行 的 ， 这 意味 着 Array 可 以 生成 一 个 特异 的 对 
象 。 相 对 于 绝 大 多 数 的 new 一 个 对 象 的 方式 都 依赖 于 子 构造 器 的 行为 ， 这 一 
步 需 要 基 构 造 器 知道 new.target ， 并 且 将 new.target.prototype 设置 
为 分 配 出 来 的 实例 的 原型 。 


。 实例 初始 化 也 会 在 基 构 造 器 中 进行 ， 派 生 的 构造 器 获得 初始 化 了 的 对 象 ， 并 运 
用 这 个 对 象 继续 执行 ， 而 不 是 将 自己 的 实例 传递 给 父 构造 颈 ， 然 后 让 父 构 造 器 


去 设置 这 个 实例 。 


15.4.4 在 方法 中 访问 父 属性 


下 面 的 ES6 代码 在 行 B 调用 了 一 个 父 方 法 : 


class Point { 
constructor(x, y) { 
thasexX = x 
this.y = y; 


} 
toString() { // (A) 

returnmY (S${thrs x $${this yi) 
} 


} 


class ColorPoint extends Point { 
constructor(x, y, color) { 


super (x, y); 
this.color = color; 


} 
toString() { 
return super.toString() // (B) 
nt hsseolor, 


} 


let cp = new ColorPoint(25, 8, 'green'); 
console.log(cp.toString()); // (25, 8) in green 


要 理解 父 调用 的 原理 ， 让 我 们 看 下 cp 的 对 象 图 : 


ColorPoint.prototype 调用 ( 行 B ) 在 本 类 中 禾 盖 了 的 父 类 方法 【开始 于 行人 A 
) 。 我 们 称 方法 存放 的 对 象 是 此 方法 的 宿主 对 象 ( home object ) 。 例 如 ， 
ColorPoint,prototype 是 ColorPoint.prototype.toString() 的 宿主 对 
象 Lo] 

在 行 B 调用 父 方 法 ， 总 共 包 含 三 个 步骤 : 

1、 开 始 在 和 宾主 对 象 的 原型 链 上 搜索 当前 方法 。 2、 找 到 名 为 toString 的 方法 。 
3、 用 当前 的 this 调用 找到 的 方法 。 en 因 是 : 调用 的 父 方法 一 定 要 能 够 
访问 到 相同 的 实例 属性 (在 我 们 的 例子 中 ， cp 的 属性 ) 。 


注意 ， We (不 是 调用 方法 ) ， 仍 然 需要 在 第 三 步 中 考虑 
this ， 因 为 这 个 属性 可 能 是 通过 getter 或 setter 实现 的 。 


让 我 们 用 三 种 不 同 的 ， 但 是 等 价 的 方式 来 描述 这 些 步骤 


// Variation 1: Super-method calls In ES5 
var result = Point.prototype.toString.call(this) // steps 1,2,3 


// Variation 2: ES5, refactored 

var superObject = Point.prototype; // step 1 

var superMethod = superObject.toString; // step 2 
var result = superMethod.call(this) // step 3 


J/ aeonse 

Var homeObject = ColorPoint.prototype; 

Var superObject = Object.getPrototypeOof(homeObject); // step 1 
var SuperMethod = superObject.toString; // step 2 

var result = superMethod.call(this) // step 3 


第 三 种 就 是 ECMAScript 6 处 理 父 调用 的 方式 。 这 种 方式 通过 两 个 内 部 绑 定 的 变量 
来 支持 ， 这 两 个 绑 定 变量 是 函数 内 部 环境 提供 的 〈 函 数 环境 给 作用 域 中 的 变量 提供 
存储 空间 ， 所 谓 的 绑 定 变量 ) 


e [[thisValue]] : 该 内 部 绑 定 变量 在 ECMAScript 5 中 也 存在 ， 存 放 在 this 值 
中 O 

e [[HomeObiject]] : 指向 环境 函数 的 宿主 对 象 。[[HomeObject]] 是 一 个 方法 的 内 
部 属性 ， 方 法 在 被 调用 的 时 候 ， super 就 会 指向 这 个 对 象 。 绑 定 变 量 和 内 部 
属性 都 是 ECMAScript 6 新 引入 的 。 


现在 方法 是 一 种 特殊 的 函数 


在 类 中 ， 一 个 使 用 super 的 方法 定义 会 创建 一 种 特殊 的 函数 : 仍然 是 一 个 二 
数 ， 但 是 有 内 部 的 [[HomeO0bject]] 属性 。 这 个 属性 通过 方法 定义 设 定 ， 在 
JavaScript 代码 中 不 能 修改 。 因 此 ， 不 可 以 自以为是 地 将 这 样 的 方法 移 到 一 个 
不 同 的 对 象 上 面 去 〈 但 是 这 在 将 来 的 ECMAScript 版 本 中 可 能 可 以 这 样 做 ) 。 


15.4.4.1 什么 地 方 可 以 使 用 super ? 


当 原 型 链 参 与 进来 的 时 候 ， 访 问 父 属性 就 变 得 很 方便 ， 这 就 是 为 什么 能 在 对 象 字面 
量 和 类 (类 既 可 以 是 被 继承 的 ， 也 可 以 是 不 被 继承 的 ; 既 可 以 是 静态 的 ， 也 可 以 是 
非 静 态 的 ) 的 方法 定义 中 使 用 super 。 


在 下 列 场景 中 不 能 使 用 super 访问 属性 : 函数 声明 中 ， 兄 数 表达 式 中 和 生成 器 区 
数 中 。 


15.4.4.2 不 能 移动 使 用 super 的 方法 


不 能 移动 使 用 super 的 方法 : 这 样 的 方法 有 一 个 内 部 的 属性 [[Homeobject]] 
， 该 属性 与 创建 此 方法 的 对 象 绑 在 一 起 。 如 果 通 过 赋值 的 方式 移动 方法 ， 方 法 中 的 
[[Homeobject]] 属性 将 继续 指向 原来 的 对 象 的 父 属 性 。 在 未 来 的 ECMAScript 

版 本 中 ， 可 能 会 有 一 种 方式 来 移动 这 样 的 方法 。 


15.4 子 类 的 细节 
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15.5 种 模式 


在 ECMAScript 6 中 ， 另 一 种 使 内 置 的 构造 器 变 得 可 扩展 的 机 制 : 如 果 一 个 方法 
(比如 Array.prototype.map() 返回 一 个 新 实例 ) ， 应 该 用 什么 构造 器 来 创建 
这 个 实例 呢 ? 


在 接 下 来 的 小 节 中 会 使 用 如 下 的 辅助 函数 : 


function ilsObject(value)t{ 


return (value !== null 
&& (typeof value === 'object' 
[|| typeof value === 'function')); 


FA 

* Spec-internal operation that determines whether x can be us 
egrasosconsEruUueror 

yA 
Punetlioni LiseConstruetor(xX) 


} 


15.5.1 标准 的 种 模式 


定制 使 用 方法 (比如 Array.prototype.map() ) 创建 的 实例 的 模式 被 称 为 种 模 
式 : 


e@ 如 果 存 在 this.constructor[Symbol.species] ， 使 用 它 作 为 新 实例 的 构 
造 器 。 
e@ 否则 ， 使 用 默认 的 构造 器 (例如 数组 的 Array ) 。 


用 JavaScript 代码 实现 ， 这 种 模式 看 起 来 像 这 样 : 


function SpeciesConstructor(0, defaultConstructor) { 
Jet C = 0O.constructor; 
if (C === undefined) { 
return defaultConstructor; 


} 
if (! isobject(C)) { 
throw new TypeError(); 


let S = C[Symbol.species]; 
if (S === undefined || S === null) { 
return defaultConstructor; 


} 

if (! isConstructor(S)) { 
throw new TypeError(); 

} 


etuness 


数组 的 标准 种 模式 在 规范 是 通过 SpeciesConstructor() 实现 的 。 


15.5.2 数组 的 种 模式 
下 面 代码 大 致 描述 了 种 模式 是 如 何 应 用 于 数组 的 : 


function ArraySpeciesCreate(originalArray, length) { 
let C = undefined; 
if (Array.isArray(originalArray)) { 
C = originalArray.constructor; 
If (isObject(cC)) { 
C = ClSymbol.species|]; 
} 


} 
if (C === undefined || C === null) { 
return new Array(length); 


} 
if (! IsConstructor(C)) { 
throw new TypeError(); 


return new C(length); 


Array.prototype.map() 返回 的 数组 通过 
ArraySpeciesCreate(this，this.length) 创建 。 


数组 种 模式 在 规范 中 是 通过 ArraySpeciesCreate() 操作 实现 的 。 


15.5.3 静态 方法 中 的 种 模式 


Promise 中 使 用 了 大 量 的 静态 方法 种 模式 ， 例 如 Promise.all() : 


let C = this; // defauit 
if (! isObject(C)) £ 
throw new TypeError(); 


// The default can be overridden via the property ‘Cl[Symbol.spec 


Tes 

let S = C[Symbol.species]; 

if (S !== undefined && S !== null) { 
CS 


} 

If (!ISConstructor(C)) { 
throw new TypeError( ) ， 

} 


let instance = new C(………); 


15.5.4 在 子 类 中 履 盖 默认 的 spieces 


下 面 所 示 是 [Symbol.species] 的 默认 getter : 


get [Symbol.species]() { 
return this; 
} 


默认 的 getter 在 内 置 的 类 Array ， ArrayBuffer ， Map ， Promise 
， RegExp ， Set 和 %TypedArray% 中 都 有 实现 ， 并 且 自 动 地 被 这 些 内 置 类 
的 子 类 继承 。 


有 两 种 方式 可 以 覆盖 默认 的 species :使 用 自 定 义 的 构造 器 或 者 使 用 null 。 
15.5.4.1 设置 自 定义 构造 器 的 species 
可 以 通过 静态 的 getter ( 行 A ) 履 盖 默认 的 species 


class MyArrayl1 extends Array { 
static get [Symbol.species]() { // (A) 
return Array; 
} 


这 样 一 来 ， map() 就 返回 Array 的 实例 了 : 


let result1 = new MyArray1() ,map(x => x); 
console.log(result1 instanceof Array); // true 


如 果 不 和 窗 盖 默认 的 _ species ， map() 就 会 返回 子 类 的 实例 : 


class MyArray2 extends Array { } 


let result2 = new MyArray2().map(x => x); 
console.log(result2 instanceof MyArray2); // true 


15.5.4.2 通过 数据 属性 指定 species 


如 果 不 想 使 用 静态 的 getter ， 那 么 就 要 使 用 0bject.defineProperty() 。 你 可 
以 使 用 赋值 ， 这 样 会 触发 setter ， 而 这 个 setter 并 不 存在 〈 只 有 一 个 
getter ) 。 


例如 ， 这 里 我 们 设置 MyArray1L 的 species 为 Array 


Object.defineProperty( 
MyArray1, Symbol,.species, { 
value: Array 


gD) 


15.5.4.3 将 species 设置 为 null 


如 果 将 species 设置 为 null ， 就 会 使 用 默认 的 构造 器 (选用 哪个 构造 器 决定 
于 使 用 哪 一 个 种 模式 变 体 ， 参 考 前 面 的 小 节 获 取 更 多 相关 信息 ) 


O 


class MyArray3 extends Array { 
static get [Symbol.species](){ 
return nuill; 
} 
} 


let result3 = new MyArray3().map(x => x); 
console.log(result3 instanceof Array); // true 


15.6 有 关 类 的 常见 问题 解答 


15.6.1 为 什么 类 不 能 像 函数 一 样 调用 ? 
目前 禁止 用 函数 的 方式 调用 类 。 这 样 做 是 为 将 来 做 准备 ， 为 了 最 终 通过 类 来 添加 一 


种 处 理 函数 调用 的 的 方式 。 一 种 这 样 做 的 可 能 方式 是 通过 一 个 特殊 的 方法 【例如 
[Symbol.functioncall] ) 。 


15.6.2 究 竞 如 何 实例 化 一 个 类 ， 传 递 一 组 参数 ? 

什么 是 Function.prototype.apply() 的 类 模拟 ? 那 就 是 ， 如 果 有 一 个 类 
TheCclass 和 一 组 数组 形式 的 参数 args ， 如 何 实例 化 Theclass ? 
一 种 办 法 是 通过 扩展 操作 符 (...) 


function instantiate(TheClass, args) { 
return new TheClass(...args); 
} 


另 一 种 方法 是 使 用 Reflect.construct() 


function instantiate(TheClass, args) { 
return Reflect.construct(TheClass, args); 
} 


15.6.3 如 何 管理 类 的 私有 数据 ? 
两 种 ES5 的 保持 数据 私有 性 的 方式 对 类 也 有 效 : 


。1、 可 以 让 私有 数据 存放 在 类 构造 器 的 作用 域 环境 中 。 我 一 直 不 喜欢 因此 而 被 
迫 添加 特殊 的 实例 方法 。 

。2、 可 以 使 用 命名 约定 (例如 下 划 线 前 级 ) 来 标记 私有 属性 。 我 喜欢 这 种 方 
式 。 这 不 会 对 私有 属性 提供 完全 的 保护 ， 并 且 略 微 使 命名 空间 杂乱 ， 但 是 实现 
的 代码 很 简单 。 


在 ECMAScript 6 中 ， 可 以 使 用 额外 的 WeakMaps 来 实现 私有 数据 ， 这 会 对 方法 
一 中 的 私有 数据 提供 完全 地 保护 ， 但 是 代码 更 加 优雅 。 下 面 是 如 何 实现 的 代码 ， 详 
细 原 理 在 关于 WeakMap 的 那 一 章 有 讲解 : 


let _counter = new WeakMap(); 
let action = new WeakMap(); 
class Countdown { 
constructor(counter, action) { 
_Counter.set(this, counter); 
_action,.set(this, action); 


} 

dec() { 
let counter = _counter.get(this),; 
if (counter < 1) return; 
counter--; 
_Counter.set(this, counter); 
If (counter === 0) { 

_action.get(this)(); 

} 


15.6.4 下 一 个 关于 类 的 内 容 是 什么 ? 
类 的 设计 原则 是 “最 大 程度 地 最 小 化 "。 讨 论 了 几 种 高 级 的 特性 ， 但 是 最 终 被 放 
了 ， 为 了 得 到 一 种 TC39 一 致 认同 的 设计 。 


下 一 个 ECMAScript 版 本 可 以 基于 这 个 最 小 化 的 设计 - 类 将 会 提供 一 些 基础 特性 ， 
比如 traits (或 者 mixins ) ， 值 对 象 (如 果 两 个 不 同 的 对 象 有 相同 的 内 容 的 话 ， 那 
么 它们 是 相等 的 ) 和 常 类 《生成 不 可 变 实 例 ) 。 


并 


15.7 类 的 优点 和 缺点 


在 JavaScript 社区 里 ， 类 是 有 争议 的 : 一 方面 ， 来 自 基 于 类 的 语言 的 人 很 开心 ， 
为 再 也 不 需要 应 对 JavaScript 的 非 传 统 继承 机 制 。 另 一 方面 ， 有 很 多 JavaScript 
程序 员 认 为 JavaScript 中 复杂 的 不 是 原型 继承 ， 而 是 构造 器 。 


ES6 的 类 提供 了 几 点 明显 的 好 处 : 


兼容 当前 大 量 的 代码 。 

相对 于 构造 器 和 构造 器 继承 ， 类 使 初学 者 更 容易 入 门 。 

子 类 化 在 语言 层面 支持 。 

可 以 子 类 化 内 置 的 构造 器 。 

不 再 需要 继承 库 ; 框架 之 间 的 代码 变 得 更 加 轻便 。 

为 将 来 的 高 级 特性 黄 定 了 基础 : traits (或 者 mixins ) ， 不 可 变 实 例 ， 等 等 。 
使 工具 能 够 静态 分 析 代 码 ( IDE ， 类 型 检测 器 ， 代 码 风 格 检测 器 ， 等 等 ) 。 


看 几 条 关于 ES6 类 的 抱 她 。 你 将 会 看 到 我 赞同 大 多 数 抱怨 ， 但 是 我 同时 认为 利 远 
大 于 次 。 我 很 高 兴 ES6 引入 了 类 ， 并 且 推 荐 使 用 类 。 


15.7.1 抱 她 : ES6 类 掩盖 了 JavaScript 继承 的 本 质 


是 的 ，ES6 类 确实 掩盖 了 JavaScript 继承 的 本 质 。 类 看 起 来 的 样子 (语法 上 ) 和 
类 的 行为 (类 的 语义 ) 是 没有 联系 的 : 看 起 来 像 是 对 象 ， 但 是 是 一 个 函数 。 对 于 
类 ， 我 倾向 于 构造 器 对 象 ， 而 不 是 构造 器 函数 。 我 在 Proto.js 项 目 中 探索 了 这 种 方 
式 ， 使 用 了 一 个 小 型 的 库 (证 明了 使 用 这 种 方法 是 很 有 好 处 的 ) 。 


然而 ， 向 后 兼容 就 有 问题 了 ， 这 就 是 为 什么 构造 器 函数 也 是 有 道理 的 原因 。 这 种 方 
式 下 ，ES6 代码 和 ES5 代码 更 容易 相互 操作 。 


语法 和 语义 的 不 一 致 将 会 导致 ES6 和 后 续 版 本 有 一 些 阻力 。 但 是 可 以 简单 地 使 用 
ES6 表层 的 东西 ， 由 此 来 享受 一 种 写 代码 的 舒适 感 。 我 不 认为 这 种 舒适 感 在 将 来 会 
拖累 你 。 新 手 能 够 更 快 入 门 ， 然 后 才 去 学 习 背 后 的 原理 (在 他 们 对 语言 感到 更 加 自 
然 之 后 ) 。 


15.7.2 抱 奶 : 类 会 焚 甸 你 ， 因 为 强制 性 的 _new 


如 果 想 实例 化 一 个 类 ， 在 ES6 中 必须 要 使 用 new 。 这 意味 着 不 能 将 类 转换 成 工 
厂 函 数 而 不 改变 调用 方式 。 确 实 是 一 个 限制 ， 但 是 有 两 个 缓和 的 因素 : 


。 你 可 以 覆盖 new 操作 符 的 默认 结果 ， 从 类 的 构造 器 方法 中 返回 一 个 对 和 象 。 

e@ 由 于 内 置 模块 和 类 ，ES6 使 IDE 更 加 容易 地 重 构 人 代码。 因此， 从 新 手 到 遂 数 
调用 将 会 很 简单 。 很 明显 ， 如 果 不 控 制 调用 你 代码 的 代码 (就 像 库 的 使 用 一 
样 ) ， 这 是 不 会 对 你 有 帮助 的 。 


因此 ， 类 的 确 在 语义 上 限制 了 你 ， 但 是 ， 一 旦 JavaScript 有 trait 了 ， 类 将 不 会 在 
概念 上 限制 你 〈 关 于 面向 对 象 的 设计 ) 。 
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15.8 深入 阅读 
下 面 的 文档 是 本 章 的 一 个 重要 来 源 : 


e 《Instantiation Reform: One last time 》 ，Allen Wirfs-Brock 的 幻灯 片 。 
。 [Speaking JS] ，《 Keeping Data Private 》。 


16 模块 


本 章 讲解 了 ES6 内 置 模块 是 如 何 工作 的 。 


16.1 概览 


在 ECMAScript 6 里 ， 模 块 存放 在 文件 中 。 文 件 和 模块 是 严格 一 对 一 关系 的 。 有 两 
种 从 模块 中 导出 东西 的 方式 。 两 种 方式 可 以 混合 使 用 ， 但 是 通常 情况 下 分 开 使 用 比 
较 好 。 


16.1.1 命名 导出 〈 Named exports ) 
可 以 有 多 个 命名 导出 项 : 


//------ 1ib.js ------ 

export const sqrt = Math.sqrt,; 

export function square(x) { 
return x * x; 


export function diag(x, y) { 
return sqrt(square(x) + square(y)); 


//------ main.js ------ 

import { square, diag } from "ipb ' ， 
console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5 


可 以 引入 整个 模块 : 


//------ main.js ------ 

本 no as fnmom aol， 
console.log(1ib.square(11)); // 121 
console.log(lib.diag(4, 3)); // 5 


16.1.2 默认 导出 
可 以 只 有 单个 默认 导出 。 例 如 ， 一 个 函数 : 


//------ myFunc. js ------ 
export defauilt function (){ :……: } // no semicolon! 


//------ main1. js ------ 


Import myFunc from "myFunc ' ， 
myFunc( ) ; 


或 者 一 个 类 : 


//------ MyClass. js ------ 
export default class nousemncolonml 


//------ main2. js ------ 


import MyClass from 'MyClass'; 
let inst = new MyCJlass() ， 


注意 ， 如 果 默 认 导 出 一 个 函数 或 一 个 类 的 话 ， 语 句 末 尾 是 没有 分 号 的 (这 在 语义 上 
叫做 匿名 声明 ( anonymous declarations ) ) 。 


16.1.3 浏览 器 : 脚本 对 比 模块 


script 模块 
. <script 

HTML 元 素 <script> ee 
全 5] 允 和 里 £ PR - 写 

顶级 的 变量 是 全 局 变量 ( 模块 的 本 地 变量 
global ) 

顶级 的 this 值 window undefined 

执行 同步 地 异步 地 

声明 式 地 引入 ( 引入 语句 ) 否 是 

编程 式 地 引入 ( 基于 Promise 的 号 可 

API ) 


文件 扩展 名 .js .js 


16.2 JavaScript 中 的 模块 


虽然 JavaScript 从 来 没有 内 置 的 模块 ， 但 是 社区 聚集 于 一 种 简单 的 模块 风格 ， 此 模 
块 风格 在 ES5 和 更 早 版 本 中 通过 库 来 实现 。 在 ES6 中 也 同样 接受 这 种 风格 : 


e。 每 一 个 模块 都 是 一 块 代码 ， 在 加 载 完成 后 执行 。 
e。 在 这 段 代 码 中 ， 可 能 有 各 种 声明 (变量 声明 ， 函 数 声 明 等 等 ) 。 
o 默认 情况 下 ， 这 些 声 明 只 是 模块 本 地 的 。 
o 你 可 以 把 其 中 一 些 标 记 为 导出 ， 这 样 其 它 模块 就 可 以 引入 了 。 
@ 一 个 模块 不 仅 能 够 导出 东西 ， 也 可 以 从 其 它 模块 中 导入 东西 。 可 以 通过 模块 标 
识 符 或 者 字符 串 访问 那些 模块 : 
o 相对 路 径 (' ../model/user ') : 这些 路 径 相 对 于 当前 模块 。 通 常 文件 
扩展 名 .js 可 以 省 略 。 
o 绝对 路 径 (' /1ib/js/helpers ') : 直接 指向 要 引入 的 模块 文件 。 
o 名 字 (' utils ') :需要 配置 模块 名 和 所 指向 模块 的 映射 关系 。 

@ 模块 是 单 例 的 。 即 便 一 个 模块 被 引入 了 多 次 ， 仅 会 存在 该 模块 的 单一 “实例 ”。 
@ 一 个 客户 端 或 服务 器 应 用 的 执行 开始 于 一 个 初始 化 模块 。 在 一 些 模块 系统 里 面 
(包括 ES6 ) ， 初 始 化 模块 可 以 内 龊 在 HTML 文件 中 (考虑 <script> 元 

素 ) 。 


这 种 模块 形式 避免 了 全 局 变量 ， 唯 一 全 局 的 东西 就 是 模块 标识 符 。 


16.2.1 ES5 模块 系统 


在 语言 层面 上 没有 显示 支持 的 前 提 下 ， ES35 模块 系统 的 良好 运作 令 人 印象 深刻 。 
两 个 重要 的 标准 〈 很 不 幸 两 者 不 兼容 ) 是 : 


。 CommonJS 模块 : 该 规范 主要 实现 于 Node.js 中 〈 Node.js 模块 有 一 些 特性 
超越 了 CommonJS ) 。 特 点 : 
o 紧凑 的 语法 
o 为 同步 加 载 设计 
o 主要 用 于 服务 器 端 
e。 异步 的 模块 定义 ( AMD ) : 该 标准 最 流行 的 实现 是 RequireJS。 特 点 : 
o 稍微 复杂 的 语法 ， 使 AMD 能 够 不 借助 于 eval() (或 者 说 是 一 个 编译 步 
又 ) 。 
o 为 异步 加 载 设计 
o 主要 用 于 浏览 器 端 
上 面 是 目前 情况 的 一 个 简单 说 明 。 如 果 需 要 更 深入 的 资料 ， 可 以 参考 Addy Osmani 
的 《Writing Modular JavaScript With AMD, CommonJS & ES Harmony 》。 


16.2.2 ECMAScript 6 模块 


ECMAScript 6 模块 的 目标 是 创建 一 种 模块 化 方式 ， 让 CommonJS 使 用 者 和 AMD 
使 用 者 都 乐于 接受 : 


e。 类 似 于 CommonJS ， 语 法 紧凑 ， 倾 向 于 导出 单个 内 容 ， 支 持 循环 依赖 。 
e@ 类 似 于 AMD ， 直 接 支 持 异 步 加 载 和 可 配置 模块 加 载 。 

通过 语言 层面 上 的 支持 ，ES6 模块 超越 了 CommonJS 和 AMD (后 面 详 细 解 
释 ) : 


e 语法 比 CommonJS 更 加 紧凑 。 
e。 可 以 静态 分 析 代 码 结 构 ( 比如 静态 检测 ， 优 化 ， 等 等 ) 


e。 比 CommonJS 更 好 地 支持 循环 依赖 。 
ES6 模块 标准 有 两 个 部 分 : 


e@ 声明 式 的 语法 (在 引入 和 导出 的 时 候 ) 
e@ 可 编程 的 加 载 器 API : 可 以 配置 模块 如 何 加 载 ， 并 且 可 以 按 条 件 加 载 模块 


O 


16.3 ES6 模块 初 颖 


有 两 种 导出 的 方式 : 命名 导出 〈 每 个 模块 可 以 导出 若干 个 ) 和 默认 导出 (每 个 模块 


只 能 导出 一 个 ) 。 


16.3.1 命名 导出 (每 个 模块 可 以 导出 若干 个 ) 


通过 在 声明 的 前 面 加 上 export 关键 字 ， 一 个 模块 可 以 导出 多 个 内 容 。 这 些 导 出 
的 内 容 通 过 名 字 区 分 ， 被 称 为 命名 导出 。 


//------ 1ib.]js ------ 

export const sqrt = Math.sqrt,; 

export function square(x) { 
sektvurn x x 

} 


export function diag(x, y) { 
return sqrt(square(x) + square(y)); 


//------ main.jJs ------ 

import { square, diag } from '1lib'; 
console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5 


还 有 其 它 方式 指定 命名 导出 (后 面 讲解 ) ， 但 是 我 发 现 这 种 方式 非常 方便 : 尽情 书 
写 代码 ， 就 像 没有 外 部 的 世界 一 样 ， 然 后 给 想 要 导出 的 所 有 内 容 加 上 一 个 关键 字 标 


> 


也 可 以 引入 整个 模块 ， 然 后 通过 对 象 属性 的 方式 来 访问 命名 导出 的 内 容 : 


//------ main.js ------ 

moomte asm ome ul 
console.1log(1ib.square(11)); // 121 
console.log(lib.diag(4, 3)); // 5 


在 CommonJS 中 有 相似 的 语法 : 有 段 时 间 ， 在 Node.js 中 ， 我 尝试 几 种 看 起 来 很 
聪明 的 方法 去 处 理 模块 导出 ， 以 便 少 写 一 些 多 余 的 代码 。 现 在 我 倾向 于 下 面 这 种 简 
单 的 但 是 稍微 史 哑 的 风格 ， 这 不 禁 让 人 联想 到 文章 《 revealing module pattern 

办 : 


//------ 1]ib.js ------ 
var sqrt = Math.sqrt,; 
function square(x) { 
recunn Xe ”xX 
} 
function diag(x, y) { 
return sqrt(square(x) + square(y)); 


} 

module.exports = { 
sqrt: sqrt, 
square: square, 
diag: diag, 

}; 

//------ main.js ------ 


var Square = regquire('l1ib').square; 
var diag = require('1ib').diag; 
console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5 


16.3.2 默认 导出 (每 个 模块 只 能 导出 一 个 ) 

仅 导 出 单一 值 的 模块 在 Node.js 社区 中 非常 流行 。 但 在 前 端 开 发 中 也 很 常见 ， 经常 
为 model 写 一 些 构造 器 或 者 类 ， 每 个 模块 一 个 model 。 一 个 ECMAScript 6 模块 可 
以 只 有 一 个 默认 导出 。 默 认 导 出 的 内 容 特 别 方便 引入 。 


下 面 的 ECMAScript 6 模块 "是 "一 个 单一 的 函数 : 


//------ myFunc. js ------ 

export defaujlt function (){ ::. } // no semicolon! 
//------ main1. js ------ 

Import myFunc from "myFunc ' ， 

myFunc( ) ; 


默认 值 是 类 的 ECMAScript 6 模块 看 起 来 像 下 面 这 样 : 


//------ MyClass, js ------ 
export default class { ::. } // no semicolon! 
//------ main2. js ------ 


Import MyClass from 'MyClass'; 
Jet inst = new MyCJlass() ， 


16.3.2.1 export default 的 操作 数 : 声明 或 表达 式 


在 语法 上 ， export default 的 操作 数 是 : 


。 一 个 声明 ; 如 果 以 函数 或 类 开始 。 这 意味 着 在 前 面 的 代码 示例 中 ， 是 匿名 声明 
( 仅 能 用 于 此 种 特殊 情形 ) 。 
。 一 个 表达 式 : 所 有 其 余 场景 。 


因此 ， 有 两 种 可 以 默认 导出 匿名 函数 的 方法 : 


export default function () {} // function declaration 
export defaujlt (function () {}); // function expression 


也 可 以 给 函数 声明 一 个 名 字 。 如 果 想 在 模块 的 其 它 位 置 访问 默认 导出 的 内 容 ， 这 会 
很 有 用 : 


bar(); 

export defauilt function bar() { :.:.. } 
这 段 代 码 等 价 于 : 

bar(); 

function bar() { } 


export default bar; 


16.3.3 模块 导出 的 是 不 变 的 绑 定 ， 而 不 是 值 


相对 于 AMD 模块 和 CommonJS 模块 ，ES6 模块 并 不 导出 值 ( 值 的 ， 决 照 ) ， 而 是 
绑 定 〈 指 向 值 存储 位 置 的 引用 ) 。 这 些 绑 定 是 不 可 变 的 : 只 能 通过 绑 定 读 取 值 ， 不 
能 修改 值 。 但 是 可 以 从 模块 内 部 修改 。 下 面 的 代码 说 明了 这 是 如 何 运作 的 : 


//------ lib.js ------ 

export let mutableValue = 3; 

export let incMutableValue() { 
mutableValue++; 


//------ malin1,. js ------ 

import { mutableValue, incMutableValue } from './1ib'; 
// The imported value is live 
console.log(mutableValue); // 3 

incMutableVvalue( ); 

console.log(mutableVvalue); // 4 


// The imported value can’t be changed 
mutableValue++; // TypeError 


如 果 通 过 星 号 (*) 引入 ， 会 得 到 类 似 的 结果 : 


//------ main2. js ------ 

lmoomte ras trom Ab 

// The imported value is live 
console.log(l1ib.mutableValue); // 3 
1ib.incMutableValue( ); 
console.log(l1ib.mutableValue); // 4 


// The imported value can’t be changed 
lib.mutableValue++; // TypeError 


16.3.4 引入 的 内 容 会 提升 


模块 引入 会 提升 (在 内 部 处 理 中 ， 会 将 引入 移 到 当前 作用 域 的 最 前 面 ) 。 因 此 ， 在 
一 个 模块 中 ， 何 处 引入 是 没有 关系 的 ， 下 面 的 代码 也 并 没有 什么 问题 : 


foo( ); 


import { foo } from 'my_module'; 


16.3.5 模块 文件 就 是 首 通 的 JavaScript 文件 
下 面 所 有 种 类 的 文件 都 有 相同 的 文件 扩展 名 .js 


ee 1、 ECMAScript 6 模块 
e。 2、 CommonJS 模块 
e 3、AMD 模块 


e 4、 脚本 文件 (在 HTML 文件 中 通过 &lt;script src="file.js"&gt; 加 
载 ) 


也 就 是 说 ， 所 列 出 的 所 有 文件 都 是 JavaScript 文件"。 它 们 被 如 何 解析 ， 依 赖 于 所 
在 的 使 用 环境 。 


16.4 设计 目标 


16.5 更 多 关于 引入 和 导出 的 知识 


16.5.1 引入 代码 的 风格 


ECMAScript 6 几 种 引入 的 代码 风格 : 
e。 默认 引入 : 


Import localName from 'src/my_lib'; 


。 命名 空间 方式 引入 : 将 模块 作为 一 个 对 象 引入 (每 一 个 属性 指 代 一 个 命名 号 
出 ) 


import * as my_lib from 'src/my_lib'; 

。 命名 引入 

import { name1，name2 } from 'src/my_1l1ib'; 
可 以 对 命名 引入 进行 重 命名 : 


// Renaming: import name1i as ‘localNamel 
import { name1l as localNamei1, name2 } from 'src/my_lib'; 


。 空 引入 : 仅 加 载 模块 ， 并 不 引入 任何 内 容 。 在 程序 中 第 一 次 这 种 引入 会 执行 模 
块 内 的 代码 。 


Import 'src/my_l1ib'; 


仅 有 两 种 方法 组 合 使 用 上 述 风格 ， 并 且 它 们 出 现 的 顺序 是 固定 的 ; 默认 导出 总 是 放 
在 第 一 个 位 置 。 


e。 组 合 默认 引入 和 命名 空间 引入 : 


Import theDefault, * as my_lib from 'src/my_lib',; 


组 合 默认 引入 和 命名 引入 : 


import theDefauilt, { name1，name2 } from 'src/my_lib'; 


16.5.2 导出 风格 : 内 联 和 子 句 


有 两 种 方式 可 以 导出 当前 模块 中 的 东西 。 一 种 是 ， 可 以 用 export 关键 字 标 记 声 
明 O 


export var myVar1 = ...， 
export let myVar2 = ...， 
export const MY_CONST = '…'…， 


export function myFunc() { 


} 


export function* myGeneratorFunc() { 


} 
export class MyClass { 


} 


默认 导出 的 “操作 数 " 是 一 个 表达 式 (包括 函数 表达 式 和 类 表达 式 ) 。 例 如 : 


export default 123; 
export defauilt function (x) { 
return x 


export default x => x; 
export default class { 
constructor(x, y) { 
lalnl se > se Sp 
this.y = y; 


另 一 种 ， 可 以 在 模块 结束 处 列 出 所 有 想 导 出 的 东西 。 


const MY_CONST = ::.,， 
function myFunc() £ 


} 


export { MY_CONST, myFunc }; 


也 可 以 用 不 同 的 名 字 寻 出 : 


export { MY_CONST as F00，myFunc }; 


16.5.3 重 导 出 (re-exporting ) 


重 导 出 指 的 是 把 另 一 个 模块 的 导出 添加 到 当前 模块 的 导出 中 去 。 可 以 添加 其 它 模块 
所 有 的 导出 : 


export * from 'src/other module'; 


export * 会 忽略 默认 导出 。 


也 可 以 选择 性 地 导出 (同时 可 以 重 命名 ) 


export { foo, bar } from 'src/other_ module',; 


// Renaming: export other_ module’s foo as myFoo 
export { foo as myFoo, bar } from 'src/other_module'; 


16.5.3.1 使 重 导 出 成 为 默认 导出 
下 面 的 语句 是 另 一 个 模块 foo 的 默认 导出 成 为 当前 模块 的 默认 导出 : 
exportr{ default yr from foo 


下 面 的 语句 使 模块 foo 的 命名 导出 myFunc 成 为 当前 模块 的 默认 导出 : 


export { myFunc as default } from 'foo'; 


16.5.4 所 有 导出 风格 


ECMAScript 6 提供 了 几 种 导出 风格 : 
e 重 导 出 : 
o 重 导 出 所 有 东西 (除了 默认 导出 ) 


export * from 'srec/other module”; 


O 通过 子 名 重 导 出 : 


export { foo as myFoo, bar } from 'src/other_module'; 


。 通过 子 句 重 导 出 


16.5 更 多 关于 引入 和 导出 的 知识 


export { MY_CONST as F00，myFunc }; 


export Var foo; 
export let foo; 
export const foo; 


export function myFunc() 全 
export function* myGenFunc() 全 


export class MyClass() 全 


@ 默认 导出 四 
o 区 数 声明 (可 以 是 匿名 的 ， 但 仅 限于 此 处 ) 


export default function myFunc() 人} 
export default function () {} 


export default function* myGenFunc() 人 
export defauilt function* () 全 


o 类 声明 (可 以 使 匿名 的 ， 但 仅 限于 此 处 ) 


export default class MyClass() 全 
export ' default class () #0} 


o 表达 式 : 导出 值 ， 而 不 是 绑 定 。 注 意 结束 的 分 号 。 


export default foo; 

export default ‘'Hello world''; 
export default 3 * 7; 
exportrdefaule (functiom (0 ), 
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16.5.5 在 一 个 模块 中 同时 包含 命名 导出 和 默认 导出 


下 面 的 场景 在 JavaScript 中 出 人 意料 地 常见 : 一 个 库 只 是 一 个 单一 的 函数 ， 但 是 附 
加 的 功能 通过 此 函数 的 属性 来 提供 。 例 如 jQuery 和 Underscore.js 。 下 面 是 
Underscore 作为 一 个 CommonJS 模块 的 粗略 描绘 : 


//------ underscore.]JSs ------ 
var _ = function (obj) { 

}; 

var each = _.each = _.forEach = 


function (obj, iterator, context) { 


J 


module.exports = _， 
//------ main. js ------ 


Var =s"require( underscore  ) 
var each = _.each,; 


有 了 ES6 ， 函 数 ” 就 是 默认 导出 ， each 和 forEach 是 命名 导出 。 事 实证 
明 ， 可 以 同时 使 用 命名 导出 和 默认 导出 。 在 下 例 中 ， 前 面 的 CommonJS 模块 ， 被 
重 写 为 ES6 模块 ， 看 起 来 像 这 样 : 


//------ Underscore, js ------ 
export defauilt function (obj) { 


export function each(ob]j, iterator, context) { 


export { each as forEach }; 


//------ main.js ------ 
import _, { each } from 'underscore',; 


注意 ，CommonJS 的 版 本 和 ECMAScript 6 的 版 本 大 臻 相似。 后 者 有 一 个 平整 的 
解构 ， 前 者 是 内 散 的 。 


对 于 ES6 模块 ， 我 通常 推荐 在 一 个 单一 的 模块 中 ， 要 么 仅 有 默认 导出 ， 要 么 仅 有 
命名 导出 。 也 就 是 说 ， 不 应 该 混合 这 两 种 导出 风格 。 
16.5.5.1 默认 导出 只 是 另 一 种 命名 导出 而 已 


默认 导出 实际 上 只 是 拥有 特殊 名 字 default 的 命名 导出 。 也 就 是 说 ， 下 面 两 个 语 
句 是 等 价 的 : 


Import { default as foo } from "1ib' ， 
mionm tnoo rom 


类 似 地 ， 下 面 的 两 个 模块 有 相同 的 默认 导出 : 


//------ module1. js ------ 
export default function foo() {} // function declaration! 


//------ module2. js ------ 


function foo() 全 
export { foo as default }; 


16.5.5.2 default : 可 以 作为 导出 名 ， 但 是 不 能 作为 变量 名 

不 能 使 用 保留 字 (比如 default 和 new ) 作为 变量 名 ， 但 是 可 以 用 于 导出 的 
名 字 (在 ECMAScript 5 中 也 可 以 用 作 属 性 名 ) 。 如 果 想 直接 引入 这 样 的 命名 导 
出 ， 就 必须 将 其 重 命名 为 正确 的 变量 名 。 


这 意味 着 default 只 能 在 重 命名 引入 的 左 侧 出 现 : 


import { default as foo } from 'some module',; 


只 能 在 重 命名 导出 的 右 侧 出 现 : 


export { foo as default }; 


在 重 导 出 中 ， as 左右 两 侧 都 是 导出 名 : 


// The following two statements are equivalent: 
export {default ny from foo 
export { defaul as default } from foo ， 


export { myFunc as default } from 'foo',; 
export { default as otherFunc } from 'foo'; 


16.6 ECMAScript 6 模块 加 载 器 API 


模块 除了 声明 式 的 语法 之 外 ， 也 有 可 动态 编程 的 APl 。 这 允许 你 : 
e。 通过 动态 编程 方法 使 用 模块 
e@ 配置 模块 加 载 
模块 加 载 器 API 不 是 ES6 标准 的 组 成 部 分 
将 会 在 另外 一 份 文档 中 说 明 ，“ JavaScript 加载 器 标准 *， 此 标准 会 比 语言 规范 
更 加 充满 活力 地 改进 。 该 文档 的 仓库 表明 : 
[JavaScript 加 载 器 规范 ] 巩固 了 ECMAScript 模块 加 载 语义 化 的 工作 ， 同 时 满 
足 了 Web 浏览 器 和 Node.js 的 模块 加 载 需求 。 
模块 加 载 器 API 仍然 处 于 制定 过 程 中 
正如 你 在 《the repository of the JavaScript Loader Standard 》 中 看 到 的 一 
样 ， 模 块 加载 器 AP| 仍然 处 于 制定 过 程 中 。 所 有 你 在 本 书 中 读 到 的 相关 内 容 都 
是 试探 性 的 。 要 得 到 一 个 关于 这 些 API 样子 的 初步 印象 ， 可 以 看 一 下 GitHub 
上 的 《the ES6 Module Loader Polyfil》。 


16.6.1 加 载 鞠 


加 载 器 负责 解析 模块 标识 符 (在 import-from 后 的 字符 串 ID ) ， 加 载 模块 ， 等 
等 。 它 们 的 构造 器 是 Reflect.Loader 。 每 一 个 平台 都 在 全 局 变量 System (系统 
加 载 器 ) 中 维护 一 个 默认 实例 ， 该 实例 实现 了 模块 加 载 的 特殊 风格 。 


16.6.2 加 载 器 方法 : 引入 模块 
可 以 通过 动态 编程 的 方式 引入 模块 ， 使 用 基于 Promise 的 API : 
System, Import(' some_ module ') 


.then(some module => { 
// Use some module 


}) 


.Ccatch(error => { 
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System,import() 使 你 能 够 : 
。 在 <script> 元 素 中 (此 处 不 支持 模块 语法 ， 详 细 内 容 参 考 关 于 模块 和 脚本 对 比 


的 小 节 ) 使 用 模块 。 
e 根据 条 件 加 载 模块 。 


System,import() 获取 一 个 单一 的 模块 ， 可 以 使 用 promise.,all() 来 引入 若 


干 个 模块 : 


Promise.alll( 
['module1', 'module2', 'module3'] 
.map(x => System.import(x))) 
.then(([modulei1i, module2, module3]) => { 
// Use module1, module2, module3 


}); 


16.6.3 更 多 加 载 器 方法 
加 载 器 还 有 很 多 方法 ， 其 中 有 三 个 重要 的 : 
e System.modules(source, options?) 
新 建 一 个 模块 实例 ， 并 在 其 中 执行 source 指定 的 JavaScript 代码 ， 然 后 通 
过 Promise 异步 返回 创建 的 模块 实例 。 
e System.set(name,module) 
用 于 注册 一 个 模块 (例如 通过 System.module() 创建 的 ) 。 
e System.define(name,source,options?) 


执行 source 中 的 模块 代码 ， 然 后 注册 返回 的 模块 实例 。 
16.6.4 配置 模块 加 载 
模块 加 载 器 AP| 将 会 有 大 量 的 钧 子 用 于 配置 加 载 过 程 。 使 用 场景 包括 : 
e@ 1、 在 模块 引入 的 时 候 检 测 模 块 是 否 有 语法 错误 (例如 ， 通 过 JSLint 或 JSHint 


) O 
e。 2、 在 引入 的 时 候 自 动 转 换 模块 《有 的 模块 可 能 包含 CoffeeScript 或 者 


TypeScript 代码 ) 。 
。3、 使 用 遗留 的 模块 ( AMD ，Node.js ) 。 


可 配置 的 模块 加 载 在 Node.js 和 CommonJS 中 是 做 不 到 的 。 


16.7 在 浏览 器 中 使 用 ES6 模块 

让 我 们 看 一 下 浏览 器 是 如 何 支 持 ES6 模块 的 。 
浏览 器 对 于 ES6 模块 的 支持 工作 正在 进 
类 似 于 模块 加 载 ， 浏 览 器 中 对 于 模块 其 它 方面 的 支持 也 正在 进行 中 。 所 有 你 在 
此 处 读 到 的 内 容 容 都 可 能 改变 。 

16.7.1 浏览 器 : 异步 模块 对 比 同步 脚本 


在 浏览 器 中 ， 有 两 种 不 同 的 实体 : 脚本 和 模块 。 它 们 有 略微 不 同 的 语法 ， 行 为 也 不 
一 样 O 


下 面 是 一 个 不 同 点 的 概览 ， 后 面 会 详细 讲述 : 


脚本 模块 
. <script 

HTML 元 素 <Script> pe niodulen 
全 人 变量 £ PK 旺 

顶级 的 变量 是 全 局 交 量 模块 的 本 地 变量 
global ) 

顶级 的 this 值 window undefined 

执行 同步 地 异步 地 

声明 式 地 引入 ( 引入 语句 ) 否 是 

编程 式 地 引入 ( 基于 Promise 的 
是 是 

API ) 

文件 扩展 名 .js .js 


16.7.1.1 Script 
Script 是 浏览 器 中 传统 的 歼 入 JavaScript 脚本 和 引用 外 部 JavaScript 文件 的 方式 。 
Script 有 一 个 网 络 媒体 类 型 属性 ， 该 属性 用 作 : 


。 Web 服务 器 传 回来 的 JavaScript 文件 的 内 容 类 型 。 
e@ <script> 元 素 的 type 属性 值 。 注 意 ， 对 于 HTML5 ， 如 果 <script> 元 素 包 
含 或 者 引用 的 是 JavaScript ， 则 推荐 省 略 type 属性 。 


面 是 最 重要 的 取 值 : 


e text/javascript : 是 一 个 遗留 的 值 ， 如 果 省 略 script 标签 的 type 
性 ， 默 认 值 就 是 它 。 对 于 Internet Explorer 8 和 更 早 版 本 的 浏览 器 来 说 ， 这 
安全 的 选择 。 


。 application/javascript :现代 浏览 器 中 推荐 使 用 。 
JavaScript 线程 在 代码 加 载 并 执行 完 之 后 停止 。 


16.7.1.2 模块 


为 了 与 JavaScript 通常 的 运行 完整 性 语义 保持 一 致 ， 模 块 体 的 执行 不 能 被 打 断 。 这 
给 导入 模块 留 下 了 两 个 选择 : 


e 1、 在 模块 体 执行 的 过 程 当 中 ， 同 步 加 载 指定 的 外 部 模块 。 这 就 是 Node.js 的 
方式 。 

e。 2、 在 模块 体 执 行 之 前 ， 异 步 地 加 载 指定 的 所 有 模块 。 这 就 是 AMD 模块 处 理 的 
方式 ， 是 浏览 器 环境 的 最 佳 选择 ， 因 为 模块 通过 互联 网 加 载 ， 在 模块 加 载 的 时 
候 没 有 必要 停止 代码 的 执行 。 另 一 个 好 处 是 ， 这 种 方式 允许 并 行 地 加 载 多 个 模 
块 。 


ECMAScript 6 提供 了 两 种 场景 下 都 是 最 好 的 方式 : Node.js 中 的 同步 语法 加 上 
AMD 的 异步 加 载 。 ES6 模块 在 语法 上 比 Node.js 模块 简单 : 引入 和 导出 必须 要 在 
顶级 范围 使 用 ， 这 也 意味 着 不 能 根据 条 件 来 引入 。 这 种 约束 使 ES6 模块 加 载 器 能 
够 静态 分 析 当 前 模块 引入 了 些 什么 模块 ， 并 在 当前 模块 体 执行 之 前 加 载 好 需要 的 模 
块 。 


脚本 同步 的 本 质 使 它们 不 能 成 为 模块 。 脚 本 其 至 不 能 声明 式 地 引入 模块 (如果 想 引 
入 模块 ， 只 能 使 用 可 动态 编程 编程 引入 的 模块 加 载 器 API ) 。 


在 浏览 器 中 ， 模 块 可 以 通过 新 的 <script> 元 素 形式 使 用 ， 这 种 方式 是 完全 蜡 步 的 : 


<script type="module"> 
import $from 1b/iquery in 
var x = 123; 


A.-. The currentlseope iSsmotrglobal 
console.log('$' in window); // false 
console.log('x' in window); // false 


// this still refers to the global object 
console.log(this === window); // true 
Script 


正如 你 看 见 的 一 样 ，script 元 素 有 自己 的 作用 域 ， 在 里 面 的 变量 是 该 作用 域 的 本 地 
变量 。 注 意 ， 模 块 代码 默认 是 处 于 严格 模式 下 的 。 这 是 一 个 好 消息 - 不 用 再 写 
'Use strict' 了 。 


类 似 于 普通 的 <script> 元 素 ，<script> 也 可 用 于 加 载 外 部 的 模块 。 例 如 ， 下 面 的 标 
签 通过 main 模块 启动 web 应 用 ( import 属性 是 我 发 明 的 ， 现 在 还 不 清楚 会 
用 什么 名 字 ) 。 


<script type="module" import="impl/main"></script> 


在 HTML 中 通过 自 定义 <script> 类 型 来 支持 模块 的 优点 是 : 在 老 的 浏览 器 中 可 以 很 
ee polyfill (一 种 库 ) 来 引入 这 种 支持 。 最 终 可 能 是 也 可 能 不 是 一 个 专用 的 
模块 元 素 (例如 module )。 


16.7.2 打包 


0 web 应 用 由 很 多 通常 比较 小 的 模块 组 成 。 通 过 HTTP 加 载 这 些 模 块 会 带 来 
能 上 的 负面 影响 ， 因 为 每 一 个 模块 都 需要 一 个 独立 的 请 求 。 因 此 ， 在 Web 开发 世 

， 将 多 个 模块 放 在 一 个 文件 中 是 一 种 运用 很 久 的 传统 做 法 。 当 前 的 方法 很 复 

杂 ， 容 易 出 错 ， 并 且 仅 对 JavaScript 有 效 。 有 两 种 解决 办 法 : 


e。 HTTP/2 : 将 允许 在 一 个 TCP 连接 中 执行 多 个 请 求 ， 这 使 打包 显得 不 是 那么 必 
要 了 。 然 后 可 以 增 量 地 更 新 应 用 ， 因 为 如 果 某 一 个 模块 改变 了 ， 浏 览 器 没 必 要 


重新 下 载 整个 打包 文件 。 
e。 包 : 另 外 ，W3C 技术 架构 组 正在 制定 一 份 用 于 “在 Web 环境 上 打 所” 的 规范 
起 法 是 将 整个 文件 夹 放 在 一 个 包 里 面 ( 想 一 下 ZIP 文件 ， ， 但 是 Pe 


式 ) 。 然 后 这 种 包 URL : 


http://example.org/downloads/editor.pack#url=/root.html;fragment 
=colophon 


等 价 于 下 面 这 种 普通 的 URL ， 如 果 这 个 包 在 服务 器 的 根 路 径 下 打开 的 话 : 


http://example.org/root.html#colophon 


浏览 器 必须 确保 一 旦 你 在 一 个 包 里 面 ， 那 么 相对 URL 就 要 能 按照 预期 工作 。 
本 节 来 源 
e 《Modules: Status Update 》 ，David Herman 的 幻灯 片 。 
。《 Modules vs Scripts 》，David Herman 的 一 封 邮件 


16.8 关于 模块 的 常见 问题 解答 


16.8.1 命名 导出 是 必须 的 吗 ? 为 什么 不 简单 地 导出 对 象 ? 


你 可 能 想 知 道 - 如 果 我 们 可 以 简单 地 默认 导出 对 象 (就 像 在 CommonJS 中 那 
样 ) ， 为 什么 还 需要 命名 导出 ?答案 就 是 你 不 能 通过 对 象 来 强制 形成 一 个 静态 的 语 
法 结构 ， 随 后 便 吕 失掉 所 有 相关 的 优点 (在 16.4.2 节 有 讲解 ) 。 


16.8.2 我 可 以 通过 eval() 执行 模块 体 吗 ? 


不 行 ， 不 能 这 么 做 。 对 于 eval() 来 说 ， 模块 是 很 高 层次 的 构造 器 。 模 块 加 载 器 
API 提供 了 从 字符 串 创建 模块 的 方式 。 在 语法 上 ， eval() 接收 脚本 而 不 是 模 
块 。 


16.9 ECMAScript 6 模块 的 益处 


年 一 看 ，ECMAScript 6 的 内 置 模块 可 能 看 起 来 像 是 一 个 无 聊 的 特性 - 毕竟 ， 我 们 
已 经 有 几 种 不 错 的 模块 系统 。 但 是 ECMAScript 6 模块 有 一 些 特 性 是 库 无 法 提供 
的 ， 比 如 更 加 紧凑 的 语法 和 静态 的 模块 结构 (这 对 代码 优化 、 静 态 检 测 等 等 有 帮 
助 ) 。 同 时 也 能 够 - 充满 希望 地 - 结束 当前 占 主导 的 标准 CommonJS 和 AMD 之 间 
的 分 裂 格局 。 


模块 有 一 个 单一 的 本 地 标准 意味 着 : 


e 不 再 有 UMD ( Universal Module Definition ) : UMD 是 一 种 模式 的 名 字 ， 该 
模式 允许 同一 个 文件 可 以 在 若干 个 模块 系统 中 使 用 (例如 CommonJS 和 AMD 
) 。 一 旦 ES6 成 为 唯一 的 模块 标准 ， UMD 就 会 成 为 过 去 。 

e 新 的 浏览 器 API 会 变 得 模块 化 ， 而 不 是 全 局 变量 或 者 navigator 的 属性 。 

e 不 再 用 对 象 作 为 命名 空间 : 像 Math 和 JSON 这 种 对 象 在 ECMAScript 5 中 
起 着 命名 空间 的 作用 。 在 将 来 ， 这 种 功能 可 以 通过 模块 实现 。 


16.10 深入 阅读 


。CommonJS 对 比 ES6 : 《JavaScript Modules 》 《作者 Yehuda Katz ) 是 
一 个 ECMAScript 6 的 快速 介绍 。 第 二 页 特别 有 趣 ， 并 排 展示 了 CommonJS 
模块 和 ECMAScript 6 版 本 的 模块 。 


[规范 ] 创建 绑 定 的 函数 : CreatelmportBinding() [规范 ] 派别 。“ Imports "开始 于 语 
法 规则 ， 并 继续 维持 语义 。 [规范 ] 规范 中 的 方法 GetExportedNames() 搜集 一 个 模 
块 的 导出 内 容 。 在 规范 中 的 第 七 步 ， 会 执行 一 个 检查 ， 防 止 其 它 模 块 的 默认 导出 被 
重 导出 。 [规范 ] 派别 。 Exports "开始 于 语法 规则 ， 并 继续 维持 语义 。 


17 新 的 数组 特性 


本 章 阐述 了 ES6 中 数组 的 新 特性 。 


17.1 新 的 数组 类 方法 
Array 类 对 象 上 增加 了 几 个 专 有 方法 。 


17.1.1 Array.from(arrayLike, mapFunc?, thisArg ?) 
Array .from() 方法 的 基本 功能 是 将 下 面 两 种 类 型 的 对 象 转换 成 数组 : 


e@ 类 数组 对 象 (Array-like objects) ， 它 具有 length 属性 和 索引 元 素 ， 比 如 像 
document .getELementsByClassName() 这 种 DOM 操作 的 返回 值 。 


. | (lterable object) ， 它 的 内 容 可 以 每 次 被 检索 一 个 元 素 。 数 组 是 
和 迭代 的 ， 同 样 的 ES6 中 新 的 数据 结构 ，Map 和 Set 也 是 可 和 迭代 的 。 


下 面 的 代码 是 将 类 数组 对 象 (Array-like objects) 转换 成 数组 : 


let lis = document.querySelectorAll('ul.fancy 11i'); 
Array.from(1is).forEach(function (1i) { 
console.log(node); 


}); 


querySelectorAll() 方法 返回 的 结果 不 是 一 个 数组 ， 所 以 它 没有 forEach() 
方法 ， 这 也 正 是 我 们 为 什么 要 将 它 转换 成 数组 的 原因 。 


17.1.1.1 Mapping via Array.from() 
一 般 地 ， 对 于 使 用 map() 方法 的 场景 来 说 ， Array.from() 也 是 一 个 便捷 的 方 


这 ， 
订 ， 


let Spans = document.querySelectorAll('span.name' ) ， 


/omapl( qenerreodly: 
ne names1 = 二 prototype. map.call(spans, s => s.textContent) 


7/ 


// Array.from( ): 
let > = Array.from(spans, s => s.textContent); 


在 这 个 例子 中 ， document .querySelectorA11() 返回 的 结果 依然 是 一 个 类 数组 
对 象 (Array-like object) ， 而 不 是 一 个 数组 ， 这 就 是 为 什么 我 们 不 能 在 它 上 面 直 
接 调用 map() 方法 。 在 之 前 的 例子 ， 我 们 将 类 数组 对 象 (Array-like object) 转 换 成 
数组 以 调用 forEach() 方法 。 在 这 里 ， C0 通用 方法 和 双 参 数 版 本 
的 Array.from() 方法 跳 过 这 个 中 间 步 


译 者 注 : 通用 方法 指 的 是 : 首先 是 一 个 方法 ， 然 后 是 这 个 方法 能 用 于 多 种 类 型 
的 对 象 。 比如 Array.prototype.slice() 方法 不 仅仅 可 用 于 数组 ， 也 可 用 
于 类 数组 对 象 、 字 符 串 。 


17.1.1.2 数组 中 的 空缺 (holes) 


Array ,from() 会 忽略 数组 中 的 空缺 , 将 它们 当做 undefined 元 素 进 


六 
入 
。 


> Array.from([9,，2]) 
[ 9，undefined，2 | 


这 意味 这 也 可 以 使 用 Array.form() 方法 创建 和 填充 数组 : 


> Array.from(new DV (=>a 
[ a re ws Wg 'a', et ] 


> Array.from(new Array(5), (x,i) => i) 
QF 2 Sy] 


如 果 你 想 使 用 国定 的 值 填充 数组 〈 前 面 的 两 个 例子 中 的 第 一 个 ) 那么 
Array.prototype.fill() 方法 ( 见 下 文 ) 会 是 一 个 更 好 的 选择 。 


17.1.1.3 from() 在 Array 子 类 中 的 使 用 


另 一 种 Array.from() 方法 的 使 用 情况 是 将 类 数组 对 象 (Array-like object) 或 可 
迭代 对 象 〔lterable object) 转换 成 Array 子 类 的 一 个 实例 ， 举 例 ， 如 果 你 创建 一 个 
Array 类 的 子 类 MyArray ， 并 且 想 将 这 样 一 个 对 象 转换 成 MyArray 的 一 个 实例 ， 你 
只 需 使 用 MyArray ,from() 。 究 其 原因 ， 是 因为 在 ES6 中 构造 函数 之 间 的 继 
承 。( 超 类 的 构造 函数 是 其 子 类 构造 函数 的 原型 ) 


class MyArray extends Array { 


} 
Jet instanceOfMyArray = MyArray.from(anIterable); 


你 也 可 以 将 该 功能 和 map 一 起 使 用 ， 对 你 构造 函数 产生 的 结果 进行 一 次 map 操 
作 : 


// from() - determine the result“s constructor via the receiver 
// (in this case, MyArray) 
let instanceOofMyArray = MyArray.from([1, 2, 3], x => x * x); 


// map(): the result is always an instance of Array 
let instanceOofArray = [1, 2, 3] .map(x => x * x); 


17.1.2 Array.of(...items) 


Array.of(item_0, item_1, …) 可 以 创建 一 个 由 ittem_0、item_1 等 元 素 组 成 的 数组 。 


17.1.2.1 Array.of() 可 以 作为 Array 字面 量 用 于 Array 子 类 


如 果 你 想 把 一 些 值 转换 成 数组 ， 你 应 当 一 直 使 用 Array 字面 量 方式 ， 特 别 是 当 
Array 构造 函数 不 能 用 的 情况 下 ， 例 如 只 有 一 个 简单 参数 且 该 参数 是 数字 的 情况 : 


> new Array(3, 11, 8) 
118 

> new Array(3) 

Be pl| 

> new Array(3.1) 

RangeError: Invalid array length 


但 是 你 如 何 把 值 转换 成 数组 子 类 构造 函数 的 实例 ? Array.of() 方法 帮助 你 实现 
( 记 住 ，Array 子 类 的 构造 函数 会 继承 所 有 的 Array 类 的 方法 ， 包 括 of() 方 
法 ) 。 


class MyArray extends Array { 


} 
console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true 


console.log(MyArray.of(3).length === 1); // true 


17.2 新 的 数组 原型 方法 
一 些 可 以 被 用 于 数组 实例 的 新 方法 
17.2.1 遍历 数组 

下 面 的 方法 可 以 帮助 遍历 数组 : 


Array.prototype.entries() 
Array.prototype.keys() 
Array.prototype.values() 


上 述 各 方法 的 返回 的 结果 都 是 包含 一 组 值 的 序列 ， 但 这 些 值 并 不 是 作为 一 个 数组 返 
回 ; 它们 通过 迭代 器 被 一 个 一 个 遍历 出 来 。 | 子 。 使 用 
Array.from() 把 迭代 器 中 的 内 容 放 入 数组 : 


> Array.from(['a', 'b'].keys()) 
0 
> Array， from(['a', 'b'].values()) 
[ El wl oi ] 
> Array.from(['a', 'b'].entries()) 
[ [90, 'a'], 

| 


也 可 以 使 用 展开 操作 符 (...) 将 迭代 器 转换 成 数组 : 
> a bd Keys 
0 


17.2.1.1 人 志 历 [index, element] 对 


你 可 以 结合 ECMAScript6 的 for-of 循环 与 entries() 方法 去 方便 地 遍历 
[index，element] 对 。 


for (let [index, elem] of ['a', 'b']j.entries()) { 
console.log(index, elem); 
} 


17.2.2 检索 数组 中 的 元 素 


Array.prototype.find(predicate, thisArg?) 


返回 数组 中 被 回调 函数 判断 为 丨 的 第 一 元 素 ， 如 果 没 有 该 元 素 ， 则 返回 Undefined 
， 举例 : 


> [6，-5，8].find(Xx => x < 0) 
-5 

> [6，5，8].find(x => x < 0) 
undefined 


Array.prototype.findIindex(predicate, thisArg?) 


返回 数组 中 被 回调 函数 判断 为 丨 的 第 一 个 元 素 的 索引 ， 如 果 没 有 该 元 素 ， 则 返 
回 -1。 举例 : 


> [6, -5, 8].findIndex(x => x < 0) 
A 
> [6, 5, 8] .findIindex(x => x < 0) 
-1 

回调 函数 的 完整 写法 : 

predicate(element, index, array) 


17.2.2.1 findlndex() 方法 将 数组 中 的 空缺 《holes) 作为 
undefined 元 素 处 理 
findIndex() 方法 将 数组 中 的 空缺 (holes) 作为 undefined 元 素 处 理 (使 用 


find() ， 你 将 无 法 告诉 它 是 否 存在 ， 因 为 如 果 它 不 能 找到 任何 东西 ， 它 将 返回 
undefined ) 


> ['a',,'c'].findIndex(x => x === undefined) 
1 


17.2.2.2 通过 findlndex() 方法 寻找 NaN 


Array.prototype.index0of() 的 一 个 众所周知 的 局 限 性 在 于 它 无 法 找到 NaN 
的 ， 因 为 通过 === 对 元 素 进 行 搜索 : 


> [NaN].indexof(NaN ) 
-1 


与 findIndex() 方法 一 起 ， 你 可 以 使 用 0bject.is() 方法 (在 面向 对 象 的 章 
节 解 释 ) ， 它 没有 这 样 的 问题 : 


> [NaN].findIndex(y => Object.is(NaN, y)) 
0 


你 也 可 以 采用 更 通用 的 方法 ， 通 过 创建 一 个 辅助 函数 的 elemIs() 


> function elemrs(x) {returmobject is bind(Oobject, yx) 
> [NaN].findIndex(elemIs(NaN)) 
0 


17.2.3 Array.prototype.fill(value, start?, end?) 


用 给 定 的 值 填充 数组 : 


ei A 
| 


数组 中 的 空缺 (holes) 不 会 被 特殊 处 理 : 


> new Array(3).fill1(7) 
Eo Wp Ae 


你 可 以 限定 填充 范围 《起 始 和 结束 ) 


SU 7 ) 


21 生成 器 ( Generator ) 


生成 器 是 ECMAScript 6 的 新 特性 ， 是 可 以 暂停 ( pause ) 和 唤醒 ( resume ) 的 
函数 〈 考 虑 协同 多 任务 处 理 或 者 协同 程序 ) 。 它 对 很 多 应 用 程序 都 有 帮助 : 迭代 
器 ， 异 步 编 程 ， 等 等 。 本 章 讲解 了 生成 器 是 如 何 工 作 的 ， 大 致 展示 一 下 在 具体 应 用 
中 的 使 用 。 


下 面 的 GitHub 仓库 包含 了 示例 代码 : generator-examples 


21.1 概 蜗 


两 个 重要 的 生成 器 应 用 场景 是 : 


e 实现 迭代 功能 
。 阻塞 异步 函数 调用 


下 面 的 子 节 简单 介绍 了 两 个 应 用 场景 ， 更 详尽 的 内 容 在 后 面 讲解 (还 会 讨论 其 它 一 
些 场景) 。 


21.1.1 通过 生成 器 实现 迭代 功能 
下 面 的 函数 返回 一 个 可 迭代 的 对 象 ， 每 个 远 代 元 素 都 是 一 个 [key, value] 对 : 


// The asterisk after ‘function means that 
// objectEntries is a generator 
function objectentries(obj) nt 

Jet propKkeys = Reflect.ownKeys(obj); 


for (let propKey of propKeys) { 
// yield returns a value and then pauses 
// the generator. Later, execution continues 
// where it was previously paused. 


yield [propKey, obj[propkey]]; 


关于 objectEntries() 是 如 何 工作 的 问题 在 后 面 讲 解 。 它 的 使 用 就 像 这 样 : 


let jane = { first: 'Jane', last: 'Doe' }; 
for (let [key,value] of objectEntries(jane)) { 
console.log(“${key}: $f{value}. ); 


} 

A Ou 

// first: Jane 
// last: Doe 


21.1.2 阻 塞 异步 亟 数 调用 


在 下 面 的 代码 中 ， 我 使 用 流程 控制 库 co 来 异步 获取 两 个 JSON 文件 。 注意 ， 行 
A 处 的 执行 块 直到 Promise.all() 的 结果 准备 就 绪 之 后 才 会 执行 。 这 意味 着 看 
起 来 像 是 同步 的 代码 却 执行 了 异步 的 操作 。 


co 人 funcionme (Oe 


BIE af 
let [croftStr, bondStr] = yield Promise.all([ // (A) 


getFile('http://localhost:8000/croft.json'), 
getFile('http://localhost:8000/bond.json' ), 
]); 
let croftJson = JSON.parse(croftStr); 
Jet bondJson = JSON.parse(bondstr); 


console.log(croftJson); 
console.log(bondJson); 
} catch (e) { 
console.log('Failure to read: ' + e); 
} 
}); 


getFile(url) 获取 url 指向 的 文件 ， 具 体 实现 在 后 面 展示 ， 我 也 将 会 介绍 
是 如 何 工 作 的 。 


21.2 什么 是 生成 器 ? 
生成 器 就 是 可 以 暂停 ( pause ) 和 次 醒 ( resume ) 的 画 数 (考虑 协同 多 任务 处 理 
和 协同 程序 ) ， 这 使 得 大 量 应 用 变 为 可 能 。 
作为 第 一 个 例子 ， 考 虑 下 面 名 为 ”genFunc 的 生成 器 函数 
function* genFunc() { 
console.1og( "First ' ) ， 


yield; // (A) 
console. log('Second’ )» // (B) 


genFunc 在 两 个 方面 和 普通 的 函数 声明 不 一 样 : 


e@ 以 “关键 字 ” function* 开始 。 
。 在 函数 中 的 yield 处 暂停 。 


调用 genFunc 并 不 会 执行 它 。 。 相 反 ， 它 返回 一 个 所 谓 的 生成 器 对 象 让 我 们 能 够 控 
制 genFunc 的 执行 


> let genobj = genFunc(); 


genFunc() 初始 的 时 候 在 它 的 函数 体 开 始 处 暂停 。 方 法 gen0bj.next() 继续 
genFunc 的 执行 ， 直 到 下 一 个 yield 


> gen0Obj .next() 
First 
{ value: undefined, done: false } 


正如 你 在 最 后 一 行 看 到 的 ， genobj ,next() 也 返回 一 个 对 象 ， 现 在 先 忽略 它 。 
一 旦 把 生成 器 当做 迭代 器 的 时 候 ， 这 就 很 重要 了 。 


genFunc 现在 暂停 在 行人 A 处。 如 果 我 们 再 次 调用 next() ， 就 会 唤醒 执行 过 
程 ， 行 B 得 以 执行 : 


> gen0bj .next() 
Second 
{ value: undefined, done: true } 


函数 休 ， 继 续 调用 gen0bj.next() 不 再 有 效 


。 让 
时 
还 
注 
~、 
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21.2.1 创建 生成 器 的 方式 
有 四 种 方法 可 以 创建 生成 器 : 
e@ 1、 通 过 生成 器 函数 声明 : 


function* genFunc() (人 …… } 
let gen0bj = genFunc(); 


e 2、 通 过 生成 器 函数 表达 式 : 


const genFunc = function* () 人 }; 
let gen0bj = genFunc()， 


。3、 通 过 对 象 字面 量 中 的 生成 器 方法 定义 ; 


let obj = { 
* generatorMethod() { 
} 

}; 


Jet geno0bj = obj.generatorMethod(); 


e@ 4、 通 过 类 定义 中 的 生成 器 方法 定义 (可 以 是 类 声明 或 者 类 定义 ) 


class MyClass { 
* generatorMethod() { 


} 
} 
Jet myInst = new MyClass(); 
let genobj = myInst.generatorMethod(); 


21.2.2 生成 器 扮演 的 角色 
生成 器 可 扮演 三 种 角色 : 


e 1、 迭 代 器 (数据 生产 者 ) : 每 一 个 yield 都 可 以 通过 next() 返回 一 个 
值 ， 这 意味 着 生成 器 可 通过 循环 和 递归 生成 一 组 值 。 由 于 生成 器 实现 了 
Iterable 接口 (该 接口 在 关于 迭代 的 那 一 章 有 讲解 )， 因 此 这 组 值 可 以 传 
给 ECMAScript 6 中 任何 支持 迭代 的 结构 。 例 如 : for-of 循环 和 扩展 操作 


A 


符 (...) 。 


e。 2、 观 察 者 (数据 消费 者 ) : es 也 可 以 从 next() 中 得 到 值 (通过 向 
next() 方法 传 入 一 个 参数 ) 意味 着 生成 器 变 成 了 数据 消费 者 : 暂停 执 
行 直到 一 个 新 的 值 通过 next() 1 
、 协 同 程序 (数据 生产 者 和 消费 者 ) : 生成 器 有 了 暂停 执行 的 能 力 ， 和 既 能 
成 为 数据 生产 者 又 能 成 为 数据 消 费 者 的 有 EE 力 之 后 ， 实 现 协同 程序 (同时 执行 多 
个 任务 ) 就 不 需要 做 太 多 的 工作 了 。 


下 一 节 更 深入 地 讲解 了 这 三 种 角色 。 


21.3 用 作 和 迭代 器 的 生成 器 (数据 生产 ) 


在 学 习 本 节 之 前 ， 你 应 该 对 ES6 和 迭代 熟悉 ， 上 一 章 讲解 了 更 多 关于 和 迭代 的 知 


TR 


正如 之 前 讲解 的 ， 生 成 器 对 象 可 以 是 数据 生产 者 ， 数 据 消费 者 或 者 两 者 都 是 。 本 节 
将 其 视 为 数据 生产 者 ， 同 时 实现 Iterable 和 Iterator 接口 (如 下 所 示 ) 。 
这 意味 着 一 个 生成 器 的 结果 既是 一 个 lterable 对 象 又 是 一 个 lterator 对 象 。 完 整 的 
生成 器 对 象 接 口 将 会 在 后 面 展示 。 


interface Iterable { 
[Symbol.iterator]() : Iterator; 


interface Iterator { 

next() : IteratorResult; 

return?(value? : any) : IteratorResult; 
} 
interface IteratorResult { 

value : any; 

done : boolean; 


生成 器 函数 通过 yield 生成 一 组 值 , 数据 消费 者 通过 继承 自 lterator 的 方法 
next() 来 消费 这 些 值 。 例 如 ， 下 面 的 生成 器 函数 生成 值 'at 和 'b! 。 


function gemnEune() 1{ 
yelid al 
yield pb ， 


下 面 的 交互 展示 了 如 何 通过 生成 器 对 象 gen0bj 得 到 yield 返回 的 值 : 


let genobj = genFunc() ， 

genobj .next'() 

Value: 'a', done: false } 

genobj .next() 

value: 'b', done: false } 

genobj ,next() // done: true => end of sequence 
value: undefined, done: true } 


VV VY 


21.3.1 近代 一 个 生成 费 的 方式 


由 于 生成 器 对 象 是 可 迭代 的 ， 所 以 ES6 中 支持 迭代 的 语言 结构 都 可 以 使 用 生成 器 
对 象 。 下 面 三 种 结构 尤其 重要 。 


首先 是 for-of 循环 : 


for (let x of genFunc()) { 
console.1log(x); 


// Output: 


/Na 


Xb 


其 次 是 扩展 操作 符 (...) ， 将 可 迭代 的 序列 转换 成 一 个 数组 的 元 素 (参考 关于 参数 
处 理 的 那 一 章 来 获取 有 关 这 个 操作 符 的 更 多 信息 ) : 


Letrarr = RgeneuneO /a 0 


> x 
ay 
> YY 
We 

21.3.2 从 生成 器 返回 


前 面 的 生成 器 函数 没有 包含 一 个 显示 的 return 。 隐 式 的 return 等 价 于 返回 
undefined 。 让 我 们 看 看 带 有 显示 return 的 生成 器 : 


function* genFuncwithReturn() { 
yield Wal 
yield 'b', 
returm result', 


next() 返回 的 最 后 一 个 对 象 包含 了 返回 值 ， 并 且 对 象 的 属性 done 为 true 


let genObjwWithReturn = genFuncwithReturn(); 
genObjwWithReturn.next() 

value: 'a', done: false } 
genOobjwWithReturn.next() 

value: 'b', done: false } 
genObjwWithReturn.next() 

value: 'result', done: true } 


mV VT VV 


但 是 ， 大 多 数 做 迭代 的 语法 结构 都 忽略 done 属性 里 面 的 值 : 


for (let x of genFuncwithReturn()) { 
console.1log(x); 


} 
/OW 
Wa 

人 


let arr = [...genFuncwithReturn()]; // ['a', 'b'] 
yield* 是 一 个 执行 生成 器 诅 套 调用 的 操作 符 ， 它 会 考虑 done 属性 里 面 的 值 ， 
这 在 后 面 讲解 。 
21.3.3 示例 : 迭代 属性 
让 我 们 看 一 个 示例 ， 该 例子 展示 了 生成 器 实现 迭代 功能 是 多 么 的 方便 。 下 面 的 函 


数 ， objectEntries() ， 返 回 一 个 对 象 属性 的 迭代 器 : 


Funetaon objectentries(ob ij) nd 
// In ES6, you can use strings or Symbols as property keys, 
// Reflect.ownKeys() retrieves both 
Jet propKkeys = Reflect.ownKeys(obj); 


for (let propKey of propKeys) { 
yield [propKey, obj[propkey]]; 


该 函数 使 你 能 够 通过 for-of 循环 和 迭代 对 象 jane 的 属性 : 


let jane = { first: 'Jane', last: 'Doe' }; 

for (let [key,value] of objectEntries(jane)) { 
console.log(“${key}: $f{value}. ); 

} 


J/ Out 


// first: Jane 
// last: Doe 


为 了 作为 对 比 - 一 个 不 使 用 生成 器 的 objectEntries() 实现 要 复杂 很 多 : 


function objectEntries(obj) { 
let index = 0; 
let propKeys = Reflect.ownKeys(obj); 


return { 
[Symbol.iterator]() { 
return this; 


}, 
next() { 
If (index < propKeys.1length) { 
let key = propKeys[index|]; 
index++; 
return { value: [key, obj[key]] }; 
} else { 
return { done: true }; 
} 
} 


}; 


一 个 值得 注意 的 生成 器 器 的 限制 是 只 能 在 生成 器 函数 中 使 用 yield 。 也 就 是 说 ， 在 回 
调 函 数 中 使 用 yield 是 没有 效果 的 : 


function* genFunc() { 
Wa eo fionrEach(X => Yieldq xX) /SyntaxErmo 
} 


不 能 在 非 生成 器 函数 中 使 用 yield ， 这 就 是 为 什么 前 面 的 代码 引起 了 语法 错误 。 
在 此 种 场景 下 ， 把 代码 改 成 不 使 用 回调 函数 的 形式 是 依从 易 的 (各 直 所 未 】 但 是 
不 幸 的 是 这 不 是 总 会 奏效 的 。 


function* genFunc() { 
Row le x of a 
yield x; // OK 
} 


上 面 的 限制 在 后 面 讲解 : 它们 使 生成 器 更 容易 实现 ， 并 且 兼 容 事 件 循 环 。 


21.3.5 通过 yield* 说 套 (用 于 输出 ) 


只 能 在 生成 器 函数 中 使 用 yield 。 因 此 ， 如 果 想 实现 一 个 生成 器 的 谨 套 逻辑 ， 需 
要 一 种 从 其 它 生成 器 中 调用 某 一 个 生成 器 的 方式 。 本 节 会 展示 这 种 方式 ， 实 际 上 这 
比 听 起 来 的 要 复杂 ， 这 就 是 为 什么 ES6 有 一 个 特殊 的 操作 符 yield* 。 现 在 ， 我 
只 解释 在 两 个 生成 器 都 有 输出 的 时 候 yield* 是 如 何 工作 的 ， 我 会 在 后 面 讲解 如 
果 和 包含 输入 的 话 优 势 如 何 工 作 的 。 


一 个 生成 器 是 如 何许 套 调 用 另 一 个 生成 器 的 ?假设 已 经 有 一 个 生成 器 子 数 foo 


unmetnon foo() ne 
yield ‘'a', 
yieldo ob., 


如 何在 另 一 个 生成 器 函数 bar 中 调用 foo ?下 面 的 方式 是 不 顶 用 的 |! 


function* bar() { 


yeld xX, 
foo(); // does nothing! 
yield 'y'; 


调用 foo() 返回 一 个 对 象 ， 但 是 实际 上 并 不 会 执行 foo() 。 这 就 是 为 什么 
ECMAScript 6 有 操作 符 yield* ， 该 操作 符 用 于 生成 器 的 在 套 调用 : 


function* bar() { 


yield 'x'; 
yield* foo(); 
Ve ye 


} 


// Collect all values yielded by bar() in an array 
let arr = [...bar()]; 
Ay [Xo 'a', Wo 2" ] 


在 内 部 ， yield* 类 似 于 : 


funetalon arm ne 
yield 'x'; 
for (let value of foo()) { 
yield value; 


} 
yaelidi yn 


yield* 的 操作 数 不 一 定 是 生成 器 对 象 ， 也 可 以 是 可 迭代 的 对 象 : 


function* bla() { 
yield 'sequence'; 
yield* [| of yielded |]; 
yiela Values 


} 


let arr = [...bla()]; 
// ['sequence', 'of', 'yielded', 'values'] 


21.3.5.1 用 yield* 拿 到 最 后 一 个 值 


大 多 数 支持 迭代 的 语法 结构 都 会 忽略 迭代 的 最 后 一 个 对 象 done 属性 为 true 
) 。 生 成 器 通过 return 返回 最 后 一 个 值 。 yield* 表达 式 的 值 就 是 迭代 的 最 
一 个 对 象 : 


function* genFuncwithReturn() { 
yield 'a'; 
Vielom bo 
return 'The resuilt'; 


} 
function* logReturned(genObj) { 


let result = yield* genObj; 
console.log(result); // (A) 


如 果 想 执行 到 行 A， 首 先 就 要 和 迭代 掉 logReturned() 中 生成 的 所 有 值 : 


> [...logReturned(genFuncwithReturn())] 
The result 
[ "a lo ] 


21.3.5.2 人 过 历 树 


用 递归 的 方式 遍历 一 棵 树 是 很 简单 的 ， 用 传统 的 方式 给 一 颗 树 添加 一 个 迭代 器 是 很 
复杂 的 。 这 就 是 为 什么 生成 器 在 此 处 大 放 异 彩 : 可 以 通过 递归 实现 一 个 迭代 器 。 作 
为 一 个 例子 ， 考 虑 下 面 的 二 又 树 的 数据 结构 。 它 是 可 迭代 的 ， 因 为 有 一 个 键 为 
oe iterator 的 方法 ， 该 方法 是 一 个 迭代 器 方法 ， 在 调用 的 时 候 返 回 一 个 迭 
代 器 


class BinaryTree { 
constructor(value, left=null, right=null) { 
this.value = value; 
this.1left = left; 
this.right = right; 
} 


2 pref eramLione A 
* [Symbol.iterator]() { 
yield this.value; 
uf Ehas lefte)nd 
Vedo tha lefts 


} 

If (this.right) { 
yield* this.right,; 

} 


下 面 的 代码 创建 了 一 颗 二 又 树 ， 并 通过 for-of 循环 遍历 : 


let tree = new BinaryTree('a', 
new BinaryTree('b', 
new BinaryTree('c'), 
new BinaryTree('d')), 
new BinaryTree('e')); 


for (let x of tree) { 
console.1log(x); 


AW OWEEes 


SS 
SS 
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21.4 用 作 观 察 者 的 生成 器 (数据 消费 ) 
作为 数据 消费 者 ， 生 成 器 对 象 遵 循 生 成 器 接口 的 后 半 部 分 ， 0bserver 


interface Observer { 
next(value? : any) : void; 
return(value? : any) : void; 
throw(error) : void; 


作为 一 个 观察 者 ， 生 成 器 处 于 暂停 状态 ， 直 到 有 输入 进来 。 有 三 种 类 型 的 输入 ， 通 
过 接口 中 声明 的 方法 来 传 入 数据 : 


e。 next() 传 入 正常 的 输入 数据 。 
e。 return() 终止 生成 器 。 
e throw() 发 出 一 个 出 错 信 号 。 


21.4.1 通过 next() 发 送 值 


如 果 将 生成 器 用 作 观 察 者 ， 那 么 可 以 通过 next() 传 入 值 ， 然 后 通过 yield 获 
取 传 入 的 值 。 


function* dataConsumer() { 
console.log('Started'); 
console.log( 1. ${yield} ); // (A) 
console.log( 2. ${yield} ); 
return 'result'; 


首先 ， 创 建 一 个 生成 器 对 象 : 


> let geno0bj = dataConsumer(); 


现在 调用 gen0bj.next() ?， 启 动 生成 器 ， 执 行 到 第 一 个 yield 处 ， 然 后 暂停 。 
next() 的 返回 值 就 是 在 行 A yield 后 面 的 值 (是 undefined ， 因 为 yield 
没有 操作 数 ) 。 在 本 节 ， 我 们 对 next() 的 返回 值 不 感 兴趣 ， 因 为 仅 使 用 
next() 传送 值 ， 而 不 是 获取 值 。 


> gen0bj .next() 
Started 
{ value: undefined, done: false } 


为 了 将 值 a 传 给 第 一 个 yield ， 值 b 传 给 第 二 个 yield ， 再 调用 两 次 next() 


> genOobj.next('a') 
a 
{ value: undefined, done: false } 


> genOobj.next('b') 
2. b 


{ value: 'result', done: true } 


最 后 一 个 next() 的 返回 值 就 是 dataconsumer() 中 return 返回 的 值 。 
done 为 true 表明 生成 器 执行 完成 了 。 


很 不 幸 ， next() 是 非 对 称 的 : 它 总 是 传 值 给 当前 暂停 的 yield ， 返 回 下 一 个 
yield 的 操作 数 。 


21.4.1.1 第 一 个 next() 


在 把 生成 器 当成 观察 者 的 时 候 ， 一 定 要 注意 第 一 次 next() 调用 是 为 了 启动 观察 
者 ， 然 后 才 接 收 输入 ， 因 为 第 一 次 调用 使 执行 流程 推进 到 了 第 一 个 yield 处 。 因 
此 ， 不 能 通过 第 一 个 next() 传送 值 - 如 果 这 样 做 了 ， 甚 至 会 得 到 一 个 错误 : 


> function* g() { yield } 
> g().next('hello') 
TypeError: attempt to send 'hello' to newborn generator 


下 面 的 工具 函数 修复 了 这 个 问题 : 


* Returns a function that, when called, 
* returns a generator object that is immediately 
eadyehionmmmnpiue va nexaen 
*/ 
function coroutine(generatorFunction) { 
return function (ee args) 
Jet generatorobject = generatorFunction(...args); 
generatorOobject.next(); 
return generatorObject; 


jee 


为 了 理解 coroutine() 是 如 何 工作 的 ， 让 我 们 比较 一 下 包装 了 的 生成 器 和 普通 
的 生成 器 : 


const wrapped = coroutine(function* () { 
console.log( First input: ${yield} ); 
return 'DONE'; 


}); 


const normal = function* () { 
console.log( First input: ${yield} ); 
return 'DONE'; 


}; 
包装 了 的 生成 器 立刻 就 可 以 接收 输入 了 : 


> wrapped().next('hello!') 
First input: hello! 
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普通 的 生成 器 需要 额外 调用 一 次 next() 才能 接收 输入 : 


> let genobj = normal(); 

> gen0bj .next() 

{ value: undefined, done: false } 
> genOobj.next('hello!') 

First input: hello! 

{ value: 'DONE', done: true } 


21.4.2 yield 的 结合 性 很 低 

yield 的 结合 性 很 低 ， 因 此 没 必 要 将 它 的 操作 数 放 在 括号 里 面 : 
yield ar+b+c'; 

这 被 看 作 : 
yield (a + b + c); 

而 不 是 : 


(yielda) ror ec, 


很 多 操作 符 的 结合 性 都 比 yield 高 ， 如果 想 把 整个 yield 表达 式 用 作 操 作 
数 ， 就 必须 将 其 放 在 括号 里 面 。 例 如 ， 如 果 用 不 带 括号 的 yield 表达 式 作为 加 法 
运算 的 操作 数 ， 就 会 抛 出 语法 错误 : 


console.log('Hello' + yield); // SyntaxError 
Consoleslog( Hello + yield 123); /A SyntaxError 


console.log('Hello' + (yield)); // OK 
console.log('Hello' + (yield 123)); // OK 


如 果 yield 表达 式 直接 就 是 函数 或 者 方法 的 参数 ， 可 以 不 用 括号 : 
foo(yield 'a', yield pb ); 


如 果 用 作 赋 值 的 右 操作 数 ， 也 可 以 不 用 括号 : 


let input = yield; 


21.4.2.1 ES6 语法 中 的 yield 


从 下 面 的 来 自 于 ECMAScript 6 规范 的 语法 规则 中 可 以 看 出 用 括号 包 庄 yield 是 
否 有 必要 。 这 些 规 则 描述 了 如 何 解析 表达 式 。 我 按照 一 般 性 〈 底 结合 性 ， 底 优先 
级 ) 到 特殊 性 (高 结合 性 ， 高 优先 级 ) 的 顺序 列 出 这 些 规 则 。 在 任何 需要 使 用 某 种 
表达 式 的 地 方 ， 也 可 以 使 用 该 表达 式 更 特殊 的 版 本 。 反 过 来 就 不 行 了 。 下 面 的 层级 
结构 以 _ ParenthesizedExpression 结束 ， 这 意味 着 如 果 将 yield 表达 式 放 在 
括号 里 面 ， 就 可 以 在 任何 表达 式 的 任何 位 置 正 常 使 用 了 。 


Expression 
AssignmentExpression 
Expression , AssignmentExpression 
AssignmentExpression 
ConditionalExpression 
YieldExpression 
ArrowFunction 
LeftHandSideExpression = AssignmentExpression 
LeftHandSideExpression AssignmentOperator AssignmentExpressi 
on 


AdditiveExpression 

MultiplicativeExpression 

AdditiveExpression + MultiplicativeExpression 

AdditiveExpression - MultiplicativeExpression 
MultiplicativeExpression 

UnaryExpression 

MultiplicativeExpression MultiplicativeOperator UnaryExpress 
ion 


PrimaryExpression 
this 
IdentifierReference 
Literal 
ArrayLiteral 
ObjectLiteral 
FunctionExpression 
ClassExpression 
GeneratorExpression 
RegularExpressionLiteral 
TemplateLiteral 
ParenthesizedExpression 
ParenthesizedExpression 
( Expression ) 


AdditiveExpression 的 操作 数 是 AdditiveExpression 和 
MultiplicativeExpression 。 因 此 ， 使 用 (更 特殊 的 ) 
ParenthesizedExpression 作为 操作 数 是 可 以 的 ， 但 是 使 用 (更 一 般 的 ) 
YieldExpression 就 不 行 了 。 


21.4.3 return() 和 throw() 


让 我 们 回顾 一 下 next(x) 是 如 何 工作 的 (在 第 一 次 调用 之 后 ) 
。 1、 生 成 器 此 时 暂停 在 一 个 yield 操作 符 处 。 


e 2、 传递 值 x 给 上 面 的 yield ， 这 意味 着 yield 表达 式 的 值 就 为 x 


e。 3、 执行 到 下 一 个 yield 或 者 return 
o yield x 使 next() 返回 { value: x, done: false } 
o return x 使 next() 返回 { value: x, done: true } 


return() 和 throw() 类 似 于 next() ， 但 是 在 第 二 步 中 做 了 不 一 样 的 事 
情 : 


e return(x) 在 yield 处 执行 return x 。 
e throw(x) 在 yield 处 执行 throw x 。 


21.4.4 return() 终止 生成 器 


return() 在 yield 处 执行 return ， 使 该 处 yield 成 为 生成 器 的 最 后 一 
次 暂停 点 。 让 我 们 使 用 下 面 的 生成 器 函数 来 看 看 这 是 怎么 工作 的 。 


funetlon soeneunen ed 
try { 
console.log('Started'); 
yield; // (A) 
ina 
console.log('Exiting"),; 
} 


ED 


在 下 面 的 交互 执行 过 程 中 ， 首 先 使 用 next() 启动 生成 器 ， 执 行 到 行人 A 的 yield 
处 暂停 。 然 后 在 那个 位 置 通过 return() 返回 。 


> let genobj1 = genFunc1(); 

> gen0bj1.,next() 

Started 

{ value: undefined, done: false } 
> genObj1i.return('Result') 
Exiting 

{ value: 'Result', done: true } 


21.4.4.1 组 织 终止 


如 果 在 finally 子 句 中 使 用 yield ， 则 可 以 阻止 return() 终止 生成 器 (也 可 
以 在 finally 子 句 中 使 用 return 语句 来 阻止 ) 。 


function* genFunc2() { 


Gy 
console.log('Started'); 
yield; 

由 analaly Et 
yield 'Not done, yet!'; 

} 


这 次 ， return() 并 不 会 退出 生成 器 函数 。 相 应 地 ， 它 返回 的 对 象 的 done 属 
性 为 ”false 。 


> let genobj2 = genFunc2(); 
> gen0bj2.next() 
Started 


{ value: undefined, done: false } 


> genO0bj2.return('Result') 
{ value: 'Not done, yet!', done: false } 


可 以 再 调用 一 次 next() 。 类 似 于 非 生 成 器 元 数 ， 生 成 
finally 子 句 之 前 放 入 队列 中 的 值 。 


Eb 


郊 数 的 返回 值 是 在 进入 


> gen0bj2.next() 
{ value: 'Result', done: true } 


21.4.4.2 从 新 生 的 生成 器 返回 
从 新 生 (尚未 启动 ) 的 生成 器 中 返回 值 是 可 以 的 : 


> function* genFunc() 全 
> genFunc().return('yes') 
{ value: 'yes', done: true } 


深入 阅读 
关于 迭代 的 那 一 章 中 有 一 节 详 细 讲 解 了 关闭 迭代 器 和 生成 器 。 
21.4.5 throw() 抛 出 错误 


uaa 在 yield 人 ， 使 该 yield 成 为 生成 器 最 后 的 暂停 点 。 让 
我 们 通过 下 面 的 生成 器 函数 看 看 这 是 如 何 工作 的 。 


function* genFunc1i() { 
ELE a 
console.log('Started'); 
yield; // (A) 
} catch (error) { 
console.log('Caught: ' + error); 
} 


在 下 面 的 交互 过 程 中 ， 首 先 调 用 next() 启动 生成 器 ， 执 行 到 行人 的 yield 处 
暂停 ， 然 后 在 那个 位 置 抛 出 异常 。 


> let genobj1 = genFunc1(); 


> gen0bj1.,next() 
Started 
{ value: undefined, done: false } 


> genObj1.throw(new Error('Problem!')) 
Caught: Error: Problem! 
{ value: undefined, done: true } 


throw() (最 后 一 行 展 示 ) 的 返回 值 来 自 于 离开 生成 器 函数 时 隐 式 的 return 


O 


21.4.5.1 未 捕获 的 异常 


如 果 没 有 在 生成 器 内 部 捕获 异常 ， 就 会 通过 throw() 抛 出 来 。 例 如 ， 下 面 的 生成 
器 函数 不 捕获 异常 : 


function* genFunc2() { 
console.log('Started' ) ， 
yield; // (A) 


如 果 在 行人 处 用 throw() 抛 出 一 个 Error 的 实例 ， 那 么 该 生成 器 函数 自身 就 
会 抛 出 这 个 错误 : 


> let genobj2 = genFunc2(); 

> gen0bj2.next() 

Started 

{ value: undefined, done: false } 

> geno0bj2.throw(new Error('Problem!')) 
Error: Problem! 


21.4.5.2 从 新 生 的 生成 器 抛 出 异常 
在 一 个 新 生 (尚未 启动 ) 的 生成 器 中 抛 出 异常 是 可 以 的 : 


> function* genFunc() 人 
> genFunc().throw(new Error('Problem!')) 
Error: Problem! 


21.4.6 示例 : 处 理 异 步 推 送 的 数据 


8 在 等 待 输入 的 时 候 暂 停 的 特性 使 其 能 非常 完美 地 按 需 处 理 异 步 
数据 。 可 以 创建 一 个 生成 器 链 来 处 理 这 些 异 步 的 数据 ， 下 面 描述 了 生成 器 链 的 要 
素 : 


e@ 生成 器 链 中 的 每 一 个 成 员 (除了 最 后 一 个 ) 都 有 一 个 target 参数。 这些 成 
员 通 过 yield 获取 数据 ， 通 过 target.next() 发 送 数据 。 
e@ 生成 器 链 的 最 后 一 个 成 员 没 有 target 参数 ， 仅 获取 数据 。 


整个 生成 器 前 面 有 一 个 非 生成 器 函数 ， 该 函数 发 出 异步 请 求 ， 并 将 请 求 结 
next() 推送 给 生成 器 链 。 


作为 一 个 例子 ， 让 我 们 将 一 组 生成 器 组 成 一 条 链 来 处 理 异 步 读 取 的 文件 数据 。 


本 例 中 的 代码 位 于 文件 generator-examples/node/readlines.js 中 。 必 须 通 过 
babel-node 执行 。 


下 面 的 代码 创建 这 条 链 : 它 包 含 生 成 器 splitLines ， numberLines 和 
printLines “。 数 据 通过 非 生 成 器 函数 readFile() 推送 给 生成 器 链 。 


readFile(fileName, splitLines(numberLines(printLines()))); 


在 我 展示 这 些 函 数 的 代码 的 时 候 ， 会 讲解 它们 都 做 了 些 什么 


正如 之 前 讲解 的 ， 如 果 生 成 器 通过 yield 接收 输入 数据 ， 生 成 器 对 象 上 的 第 一 次 
next() 调用 不 会 做 任何 事 。 这 就 是 为 什么 我 要 使 用 之 前 展示 的 辅助 方法 
coroutine() 来 创建 协同 程序 。 该 辅助 方法 帮助 我 们 执行 第 一 次 的 next() 调 
用 0 


readFile() 是 一 个 非 生成 器 函数 ， 启 动 了 整个 流程 : 


import {createReadStream} from "fs '， 


AR 
* Create an asynchronous ReadStream for the file whose name 
* is fileName and feed it to the generator object target . 
* Qsee ReadStream https://nodejs.org/api/fs.html#fs class fs _re 
adstream 
A 
function readFile(fileName, target) { 
Jet readStream = createReadStream(fileName, 
{ encoding: 'utf8', bufferSize: 1024 }); 
readStream.on('data', buffer => { 
let str = buffer.toString('utf8'); 
target.next(str); 
}); 
readStream.on('end', () => { 
// Signal end of output sequence 
target.return(); 


}); 


生成 器 链 以 splitLines 开始 : 


Pk 
* Turns a sequence of text chunks into a sequence of lines 
* (where lines are separated by newlines) 


gh 
const splitLines = coroutine(function* (target) { 
let previous = "'， 
LEURNX 


while (true) { 
previous += yield,; 
let eolIndex; 
while ((eolIndex = previous.indexOof('\n')) >= 0) { 
Jet line = previous.slice(0, eolIndex); 
target.next(line); 
previous = previous.slice(eolIndex+]1); 


} 


} 
} finally { 
// Handle the end of the input sequence 
// (signaled via ‘return() ) 
If (previous.length > 0) { 
target.next(previous); 
} 


// Signal end of output sequence 
target.return(); 


}); 


NN 


请 注意 : 
e readFile() 使 用 生成 器 


据 块 结束 了 。 
e 在 splitLines 的 无 限 循 环 里 通过 yield 等 待 输入 数据 的 时 候 ， 


readFile() 发 出 数据 结束 信号 。 return() 使 其 跳出 那个 无 限 循 环 。 
splitLines 使 用 finally 子 忽 处 理 扫尾 工作 。 


$ 对 象 方法 return() 来 通知 生成 器 链 它 发 送 的 数 


下 一 个 生成 器 是 numberLines 


FA 
prefnxes numbers to anseqUuence ormines 


Eh 
const numberLines = coroutine(function* (target) { 


rye 
for (let lineNo = 0; ; lineNo++) { 


let line = yield; 
target.next( ${lineNo}: ${line}. ); 


} 
} finally { 
// Signal end of output sequence 


target.return(); 


最 后 一 个 生成 器 是 printLines 


VA 
* Receives a sequence of lines (without newlines) 


* and logs them (adding newlines). 
7 
const printLines = 
while (true) £ 
let line = yieild; 
console.1log(line); 


coroutine(function* () { 


} 
}); 


上 述 代码 很 奇妙 ， 所 有 的 事情 都 是 惰性 的 〈 按 需 的) :在 数据 到 达 的 时 候 ， 拆 分 
行 ， 加 上 行 号 ， 打 印 出 来 ; 在 能 够 打印 之 前 并 不 需要 等 到 | 所 有 文本 都 读 取 完 毕 。 


21.4.7 yield* : 所 有 细节 


yield* 可 以 实现 从 一 个 生成 器 函数 中 (调用 者 ) 调用 另 一 个 生成 器 函数 (被 调 


用 者 ) 的 功能 。 


到 目前 为 止 ， 我 们 仅 看 到 了 yield 的 一 个 方面 : 将 yield 中 的 值 从 被 调用 者 
传 给 调用 者 。 既 然 我 们 对 生成 器 接收 输入 感 兴 趣 ， 那 么 另 一 方面 就 变 得 有 意义 了 : 
yield* 也 将 调用 者 接收 到 的 输入 数据 转发 给 被 调用 者 。 


首先 我 将 展示 如 何在 JavaScript 中 实现 yield* ， 以 此 来 讲解 yield* 的 完整 
语义 。 然 后 给 出 简单 的 例子 ， 调 用 者 通过 next() 、 return() 和 throw() 
接收 到 输入 数据 ， 转 发 给 被 调用 者 。 


下 面 的 语句 : 


Jet yieldStarResult = yield* calleeFunc(); 


大 致 等 价 于 : 


let yieldStarResult; 


Jet callee0bj = calleeFunc(); 
let prevReceived = undefined,; 
while (true) { 
By 
// Forward input previously received 
lJet {value,done} = calleeO0bj.next(prevReceived); 


if (done) { 
yieldStarResult = value; 
break; 

} 


prevReceived = yield value; 
} catch (e) { 

// Pretend ‘return can be caught like an exception 

if (e instanceof Return) { 
// Forward input received via return() 
calleeO0bj.return(e.returnedValue); 
return e.returnedValue; // “re-throw” 

} else { 
// Forward input received via throw( ) 
calleeO0b]j.throw(e); // may throw 


为 了 保持 简单 ， 上 面 的 代码 没有 考虑 几 件 事 : 


e。 yield* 的 操作 数 可 以 是 任何 可 和 迭代 的 值 。 
e return() 和 throw() 是 可 选 的 迭代 器 方法 。 应 该 仅 在 它们 存在 的 时 候 才 
调用 。 
e。 如 果 接 收 到 异常 ， throw() 不 存在 ， 但 是 有 return() ， 此 时 调用 
return() (在 抛 出 弄 常 之 前 ) ， 让 callee0bject 有 机 会 做 清理 工作 。 
e。 callee0bj 可 以 通过 返回 一 个 done 属性 为 ”false 的 对 象 来 拒绝 关闭 。 


然后 调用 者 也 不 得 不 拒绝 关闭 ， yield* 继续 和 迭代。 


21.4.7.1 示例 : 用 yield* 转发 next() 传 入 的 值 


下 面 的 生成 器 元 数 caller() 通过 yield* 调用 生成 器 函数 callee() 


functlion eolleel() 
console.log('callee: "+ (yield)); 
} 


unetlon ea 
while (true) { 
yield*"callee()» 
} 


callee 打印 next() 传 入 的 值 ， 这样 就 可 以 检查 传 给 caller 的 值 是 
是 pb。 


> let callerO0bj = caller(); 


> callerObj.next() // start 
{ value: undefined, done: false } 


> callerObj.next('a') 
callee: a 
{ value: undefined, done: false } 


> callerObj.next('b') 


callee: b 
{ value: undefined, done: false } 


21.4.7.2 示例 : 用 yield* 转发 throw() 抛 出 的 异常 


用 下 面 一 段 代码 来 展示 当 yield* 代理 另 一 个 生成 器 的 时 候 ， throw() 
工作 的 。 


O 


是 如 何 


function* callee() { 


Gy 
VerTadlibas ynA) 
yield 'c'; 
penmally 
console.log( finally callee” ), 
} 
} 
function* caller() ff 
tye 
yield 'a'; 
yield* callee(); 
yield 'd'; 
} catch (e) { 
console.log('[caller| ' + e); 
} 
} 


首先 创建 一 个 生成 器 对 象 ， 然 后 执行 到 行人 A 。 


> let gen0bj = caller(); 


> gen0Obj.next().value 
a 
> gen0Obj.next().value 
Wo 


在 行 A， 抛 出 一 个 异常 : 


> geno0bj.throw(new Error('Problem!"')) 
finally callee 

[caller] Error: Problem! 

{ value: undefined, done: true } 


callee 并 不 会 捕获 该 异常 ， 凡 常会 传 进 caller ， 所 以 会 在 caller 执行 完 
之 前 打印 出 异常 。 


21.4.7.3 用 yield* 转发 return() 返回 值 


用 下 面 一 段 代码 来 展示 当 yield* 代理 另 一 个 生成 器 的 时 候 ， return() 是 如 
何 工作 的 。 


function* callee() { 


Gy 
yield 'b'; 
yeld co 
penmally 
console.log( finally callee” ),; 
} 
} 
function* caller() ff 
ve 
yield 'a'; 
yield* callee(); 
yield 'd'; 
} finally { 
console.log('finally caller'); 
} 
} 


解构 在 拿 到 了 需要 的 元 素 之 后 ， 如 果 和 迭代 器 还 未 迭代 完 ， 那 么 就 会 通过 
return() 关闭 这 个 迭代 器 : 


let [x, y] = caller(); // ['a', 'b'] 
// Output: 


// finally callee 
// finally caller 


有 趣 的 是 ， return() 被 送 入 caller ， 然 后 转发 给 callee ( callee 更 
早 结束 ) ， 但 是 之 后 也 会 终止 caller (这 是 调用 return() 的 人 所 希望 看 到 
的 ) 。 也 就 是 说 ， return 的 传播 和 异常 很 类 似 。 


理解 return() 的 小 提示 





为 了 理解 return() ， 这 样 问 自己 是 很 有 帮助 的 : 如 果 我 把 callee 兄 数 中 代 
码 复 制 粘贴 到 caller 函数 中 ， 会 发 生 什 么 。 


21.5 生成 器 用 作协 同 程序 (多 任务 协作 ) 


我 们 已 经 学 习 了 生成 器 用 作 数 据 源 和 数据 接收 器 。 对 于 很 多 应 用 来 说 ， 最 好 严格 区 
分 这 两 个 角色 ， 因 为 这 会 使 事情 变 得 更 加 简单 。 本 节 描 述 了 整个 生成 器 接口 (混合 
了 两 种 角色 ) ， 并 在 一 个 场景 中 两 种 角色 都 需要 : 多 任务 协作 ， 任 务 既 要 能 够 发 送 
信息 ， 又 要 能 够 接收 信息 。 


21.5.1 完整 的 生成 器 接口 
完整 的 生成 器 对 象 接 口 ， Generator ， 既 处 理 输出 又 处 理 输入 : 


Interface Generator { 
next(value? : any) : IteratorResult; 
throw(value? : any) : IteratorResult; 
return(value? : any) : IteratorResult,; 


interface IteratorResult { 
value : any; 
done : boolean; 


该 接口 在 规范 文档 的 " Properties of Generator Prototype " 节 描 述 了 。 


Generator 接口 混合 了 两 种 之 前 章节 见 过 的 接口 : 用 于 输出 的 Iterator 接口 
和 用 于 输入 的 Observer 接口 。 


interface Iterator { // data producer 
next() : IteratorResult,; 
return?(value? : any) : IteratorResult; 


interface Observer { // data consumer 
next(value? : any) : void; 


return(value? : any) : void; 
throw(error) : void; 


21.5.2 多 任务 协作 


多 任务 协作 场景 需要 生成 器 既 能 接收 输入 又 能 处 理 输出 。 在 理解 它 的 工作 原理 之 
前 ， 先 复习 一 下 当前 JavaScript 中 的 并 行 方式 。 


JavaScript 运行 在 单 进程 中 ， 有 两 种 方式 可 以 突破 这 个 限制 : 
e@ 多 重 处 理 ( Multiprocessing ) : Web Worker 使 你 可 以 在 多 个 进程 中 运行 


JavaScript 代码 。 数 据 共享 是 多 重 处 理 的 最 大 陷阱 。 Web Worker 通过 不 共享 
任何 数据 来 避免 这 个 问题 。 也 就 是 说 ， 如 果 你 希望 某 个 Web Worker 能 拿 到 数 
据 ， 就 必须 传 入 数据 的 副本 或 者 将 数据 转移 给 该 Web Worker (在 这 之 后 你 再 
也 不 能 在 当前 进程 中 访问 该 数据 了 ) 。 

e 多 任务 协作 ( Cooperative multitasking ) : 有 大 量 的 模式 和 库 尝试 处 理 多 任 
务 协作 。 运 行 多 个 任务 的 时 候 ， 在 某 一 刻 只 能 有 一 个 任务 执行 。 每 一 个 任务 必 
须 显示 地 暂停 自己 ， 在 任务 切换 的 时 候 释 放 控 制 权 。 在 这 些 尝试 中 ， 数 据 经 常 
在 任务 之 间 共 享 。 但 是 由 于 需要 显示 地 暂停 ， 就 引入 了 一 些 风险 。 


有 两 种 应 用 场景 从 多 任务 协作 中 受益 ， 因 为 两 种 场景 包含 了 通常 按 序 执行 的 控制 
流 ， 但 是 偶尔 还 是 会 暂停 的 。 


e Streams : 任务 会 按 序 处 理 数据 流 ， 并 且 在 没有 数据 的 时 候 暂 停 。 
o 对 于 二 进 制 数据 ，WHATWG 正 致力 于 一 个 建议 标准 ， 该 标准 基于 回调 和 
Promise 。 
o 对 于 数据 流 ， 通信 顺序 进程 ( CSP ) 是 一 个 有 趣 的 解决 方案 。 基 于 生成 
器 的 CSP 库 在 本 章 后 续 部 分 有 讲述 。 
。 异 步 计算 : 在 执行 一 个 长 时 间 运 行 的 计算 的 时 候 ， 任 务 会 被 阻塞 (暂停 ) ， 直 
到 计算 完成 。 
o 在 JavaScript 中 ，Promise 成 为 了 处 理 异 步 计算 的 流行 方式 。ES6 对 其 
提供 了 支持 。 下 节 讲 解 了 生成 器 是 如 何 让 Promise 的 使 用 变 得 简单 。 


21.5.2.1 通过 生成 器 简化 异步 计算 


几 个 基于 Promise 的 库 通过 生成 器 简化 异步 代码 。 生 成 器 用 作 Promise 的 接收 器 
是 非常 完美 的 ， 因 为 生成 器 可 以 暂停 ， 直 到 传 入 计算 结果 。 


下 面 的 例子 展示 了 使 用 二 J. Holowaychuk 的 co 库 之 后 写 出 来 的 代码 的 样子 。 我 们 
需要 两 个 库 (如 果 通 过 babel-node 运行 Node.js 代码 ) 。 


require('isomorphic-fetch'); // polyfill 
let co = require('co'); 


co 是 用 于 多 任务 协作 的 实际 可 用 的 库 ， isomorphic-fetch 是 新 的 基于 
fetch API ( XMLHttpRequest 的 替代 方案 ; 阅读 Jake Archibald 的 "That's so 
fetch! "获取 更 多 相关 信息 ) 的 一 个 polyfill 。 fetch 使 得 写 一 个 返回 指定 url 
的 文件 的 文本 内 容 的 函数 getFile 变 得 容易 : 


function getFile(url) { 
return fetch(url) 
‘then(request => request.text()); 


我 们 现在 具备 了 使 用 co 的 所 有 条 件 。 下 面 的 代码 读 取 两 个 文件 的 文本 内 容 ， 解 
析 里 面 的 JSON 数据 ， 并 打印 结果 。 


co 人 funcionme (Oe 


BIE af 
let [croftSstr, bondStr] = yield Promise.all([ // (A) 


getFile('http://localhost:8000/croft.json'), 
getFile('http://localhost:8000/bond.json' ), 
]); 
let croftJson = JSON.parse(croftStr); 
Jet bondJson = JSON.parse(bondstr); 


console.log(croftJson); 
console.log(bondJson); 
} catch (e) { 
console.log('Failure to read: ' + e); 
} 
}); 


注意 这 段 代 码 看 起 来 是 多 么 漂亮 的 同步 代码 ， 即 使 在 行人 执行 了 异步 调用 。 作 为 执 

行 异 步 任务 的 生成 器 ， 通 过 yield 传 给 整个 任务 流程 的 调度 者 co 一 个 Promise 对 
象 。 yield 使 得 生成 器 暂停 下 来 。 一 旦 Promise 返回 结果 ， 调 度 者 co 就 会 通过 
next() 唤醒 生成 器 ， 并 传 入 结果 。 一 个 简单 版 本 的 co 看 起 来 像 下 面 这 样 。 


function co(genFunc) { 
let genobj = genFunc(); 
run( ); 


function run(promiseResult = Undefined) 1{ 
let {value,done} = genO0bj.next(promiseResult); 
If (!done) { 
// A Promise was yielded 
value 
.then(result => run(result)) 
.Ccatch(error => { 
gen0bj .throw(error ) ; 


好 


21.5.3 基于 生成 器 的 多 任务 协作 的 限制 


协同 程序 是 没有 限制 的 多 任务 协作 程序 : 在 协同 程序 内 部 ， 任 何 函 数 都 可 以 暂停 束 
个 协同 程序 (函数 自身 的 激活 ， 函 数 调用 者 的 激活 ， 调 用 者 的 调用 者 ， 等 等 ) 


相对 而 言 ， 你 只 能 在 生成 器 函数 的 直接 内 部 暂停 该 生成 器 ， 并 且 只 能 让 当前 的 遂 
变 为 站 汉 交 奖 起 。 由 于 这 些 限 制 ， 生 成 器 有 时 又 被 叫做 浅 协同 程序 ( shallow 
coroutines ) 。 


Le] 


21.5.3.1 生成 器 限制 的 好 处 
生成 器 的 限制 有 两 个 主要 的 好 处 : 


。 生成 器 和 事件 循环 兼容 ， 后 者 在 浏览 器 中 提供 了 简单 的 多 任务 协作 。 我 会 马上 
讲解 详细 的 内 容 。 

e。 生成 器 实现 起 来 相当 简单 ， 因 为 仅 需要 暂停 一 个 活跃 的 函数 ， 并 且 浏 览 器 可 以 
继续 使 用 事件 循环 。 


JavaScript 已 经 有 一 种 非常 简单 的 多 任务 协作 方式 : 事件 循环 ， 安 排 任务 队列 中 任 
务 的 执行 。 每 个 任务 都 开始 于 某 个 函数 的 调用 ， 结 束 于 该 函数 调用 的 完成 。 事 件 ， 
setTimeout() 和 其 它 一 些 机 制 添加 任务 到 队列 中 。 


这 是 事件 循环 的 简单 解释 ， 对 于 目前 而 言 足 够 了 。 如 果 你 对 细节 感 兴趣 ， 参 考 
关于 异步 编程 的 那 一 章 。 


这 种 方式 的 多 任务 确保 了 一 件 重要 的 事情 : 运行 的 完整 性 ; 每 一 个 函数 在 执行 完 之 
前 都 不 会 被 打 断 。 有 函数 成 为 了 事务 ， 可 以 执行 完整 的 逻辑 ， 不 用 大 各 出 订 它们 操作 
的 处 于 某 个 中 间 状 态 的 数据 。 并 发 访 问 共享 数据 使 得 多 任务 变 得 复杂 起 来 ， 而 在 

vac 的 并 发 模型 中 这 是 不 允许 的 。 这 就 是 为 什么 运行 的 完整 性 是 一 个 优点 。 


然而 ， 协 同 程序 妨碍 了 运行 的 完整 性 ， 因 为 任何 函数 都 可 以 暂停 它 的 调用 者 。 例 
如 ， 下 面 的 逻辑 由 多 步 组 成 : 


stepi(sharedData); 
step2(sharedData); 
lastStep(sharedData); 


如 果 step2 暂停 了 逻辑 ， 其 它 任 务 就 可 以 先 于 当前 任务 的 最 后 一 步 执行 。 这 些 任 
ee es a de 
sharedData 。 生 成 器 保护 了 执行 的 完整 性 ， 它 只 暂停 自身 ， 然 后 返回 调用 者 。 


co 和 类 似 的 库 提供 了 协同 程序 的 强大 能 力 ， 而 握 弃 掉 了 协同 程序 的 缺陷 


e。 给 任务 提供 了 调度 器 ， 调 度 器 通过 生成 器 

. 任务 “就 是 "生成 器 ， 因 此 可 以 被 完全 暂停 

e@ 如 果 通 过 yield* 启 套 调用 (生成 器 ) 
调用 者 可 以 控制 防 数 的 暂停 。 


定义 
函数 ， 那 么 该 函数 只 具备 暂停 能 力 。 


21.6 生成 器 实例 
本 节 给 出 几 个 例子 ， 用 于 说 明生 成 器 可 以 用 来 干什么 


下 面 的 GitHub 仓库 包含 了 示例 代码 : generator-examples 


21.6.1 通过 生成 器 实现 迭代 器 
代 


在 关于 和 迭 
们 。 


21.6.1.1 可 和 迭代 的 选择 器 take() 
take() 将 一 组 可 和 迭代 的 值 (可 能 是 无 限 的 ) 转换 成 一 个 长 度 n 的 序列 : 


function* take(n, iterable) { 
for (let x of iterable) { 
if (n <= 0) return; 
Ne 
yield x; 


下 面 是 使 用 它 的 一 个 例子 : 


eearr a dl 
for (let x of take(2, arr)) { 
console.1log(x); 


} 
Out ut 


// a 
Va/ 


一 个 不 使 用 生成 器 实现 的 take() 版 本 会 更 加 复杂 : 


器 的 章节 ， 我 "顺手 ”实现 了 几 个 迭代 器 。 在 本 节 ， 我 用 生成 器 来 实现 它 


function take(n, iterable)™ 
let iter = iterable[Symbol.iterator](); 
return { 
[Symbol.iterator]() { 
return this; 
}, 
next() { 
(n> 0 
n--/ 
return iter.next(); 
} else { 
maybeCloseIterator(iter); 
return { done: true }; 


} 

}, 

return() { 
Nn = 0,，; 
maybeCloseIterator(iter); 


}; 
} 
function maybeCloseIterator(iterator) { 
if (typeof iterator.return === 'function') { 
iterator.return(); 
} 


注意 迭代 选择 器 zip() 通过 生成 器 实现 并 不 会 获 益 多 少 ， 因 为 要 使 用 多 个 迭代 


不 能 使 用 for-of 循环 。 
21.6.1.2 无 限 迭 代 器 
naturalNumbers() 返回 一 个 迭代 所 有 自然 数 的 迭代 器 : 


function* naturalNumbers() { 
for 全 ensg nr) 
yield n; 


for (let x of take(3, naturalNumbers())) { 
console.1log(x); 
} 


// Output 
yA © 
/od 
全 2 


下 面 是 非 生成 器 版 本 的 实现 ， 你 可 以 对 比 一 下 : 


function naturalNumbers() { 
let n = 0; 
return { 
[Symbol.iterator]() { 
return this; 


}, 
next() { 

return { value: n++ }; 
} 


21.6.1.3 灵感 来 自 于 数组 的 迭代 选择 器 : map ， filter 


数组 可 以 通过 map 和 filter 方法 转换 。 这 些 方法 可 以 一 般 化 为 把 可 迭代 对 象 
作为 输入 ， 然 后 输出 另 一 个 可 迁 代 对 象 。 


21.6.1.3.1 一 般 化 的 _map() 
下 面 是 map() 的 一 般 化 版 本 : 


function* map(iterable, mapFunc) { 
for (let x of iterable) { 
yield mapFunc(x); 
} 


处 理 无 限 迭 代 对 象 的 map() 


> [...take(4, map(naturalNumbers(), x => x * x))] 
[ 0, 1, 4, 9] 


21.6.1.3.2 一 般 化 的 ”filter() 
下 面 是 filter() 的 一 般 化 版 本 : 


funetlon foultenm(Tterable TalteveEunc nt 
for (let x of iterable) { 
If (filterFunc(x)) { 
yield x; 
} 


处 理 无 限 迭 代 对 象 的 filter() 


> [...take(4, filter(naturalNumbers(), x => (x % 2) === 0))] 
[ 090, 2, 4, 6 ] 


21.6.2 用 于 延迟 执行 的 生成 器 


接 下 来 的 两 个 例子 展示 生成 器 如 何 用 于 处 理 字 符 流 。 

© 输入 是 字符 流 9 

。 第 一 步 - 分 词 (字符 一 单词 ) : 字符 组 合成 单词 ， 就 是 满足 正则 表达 式 
/人 ^[A-Za-z0-9]$/ 的 字符 囊 。 忽 略 非 单词 的 字符 ， 但 是 这 些 字符 分 割 单 词 。 
这 一 步 的 输入 是 字符 流 ， 输 出 是 单词 流 。 

e 第 二 步 - 提取 数字 (单词 一 数字 ) : 仅 保留 匹配 正则 /^[9-9]+$/ 的 单词 ， 
并 将 它们 转换 成 数字 。 

e。 第 三 步 - 添加 数字 (数字 一 数字 ) : 对 于 每 个 接收 到 的 数字 ， 返 回 到 目前 为 目 
接收 到 的 所 有 数字 之 和 。 


所 有 内 容 都 延迟 执行 〈 增 量 地 和 按 需 地 ) ， 很 平滑 优雅 : 接收 到 第 一 个 字符 之 后 就 
立即 开始 计算 。 例 如 ， 我 们 不 需要 等 到 接受 完 所 有 字符 才 去 拿 第 一 个 单词 。 
21.6.2.1 延迟 拉 取 (用 作 迫 代 器 的 生成 器 ) 

用 生成 器 实现 的 延迟 拉 取 以 如 下 的 方式 工作 。 实 现 步 又 一 到 三 的 三 个 生成 器 像 下 面 
这 样 链 式 调 用 : 

addNumbers(extractNumbers(tokenize(CHARS ) ) ) 
链 中 的 每 个 成 员 从 数据 源 中 拉 取 数据 ， 然 后 生产 出 另 一 组 数据 。 整 个 过 程 开 始 于 
tokenize ， 它 的 数据 源 就 是 字符 串 CHARS 。 


21.6.2.1.1 第 一 步 - 分 词 


下 面 的 技巧 使 得 代码 更 简单 一 点 儿 : 迭代 器 的 最 后 一 个 结果 (属性 done 是 
false ) 设置 为 结束 标记 END_OF_SEQUENCE 。 


AL 
Retunsaann ermabea na ransiormmse ne sequence 
* of characters into an output sequence of words. 
2 
funeclon cokennzel(chars) en 
let iterator = chars[Symbol.iterator](); 
let ch; 
do { 
ch = getNextIitem(iterator); // (A) 
If (iswordChar(ch)) { 
let word = "'，; 
do { 
word += ch; 
ch = getNextIitem(iterator); // (B) 
} while (isWordChar(ch)); 
yield word; // (C) 


} 
// Ignore all other characters 
} while (ch !== END OF_ SEQUENCE); 


const END OF _ SEQUENCE = Symbol(); 

function getNextItem(iterator) { 
let {value,done} = iterator.next(); 
return done ? END_ OF_SEQUENCE : value; 


} 
function iswWordchar(ch) { 

return typeof ch === 'string' && /^[A-Za-z0-9]$/.test(ch); 
} 


该 生成 器 是 如 何 延 迟 的 ?了 当 通 过 next() 请 求 一 个 值 的 时 候 ， 该 生成 器 就 从 
iterator (行人 A 和 行 B ) 中 拉 取 数据 ， 处 理 之 后 就 放 在 yield 后 面 返回 出 去 
( 行 C ) 。 然 后 生成 器 元 数 暂停 ， 直 到 下 一 次 数据 请 求 的 到 来 。 这 意味 着 这 种 分 词 

在 第 一 个 字符 就 绪 的 时 候 就 开始 了 ， 这 对 流 ( stream ) 很 方便 。 


让 我 们 尝试 一 下 分 词 。 注 意 空格 和 点 符号 不 是 单词 ， 忽 略 它 们 ， 但 是 它们 分 割 单 
词 。 我 们 利用 一 个 事实 : 字符 串 就 是 字符 ( unicode 码 点 ) 的 迭代。 

tokenize() 的 结果 就 是 一 组 单词 的 迭代 ， 可 以 通过 扩展 操作 符 〈.…) 将 其 转换 
为 数组 。 


[...tokenize('2 apples and 5 oranges.')] 
'2', '"'apples', 'and', '5', 'Oranges' | 


> 
[ 
21.6.2.1.2 第 二 步 - 提取 数字 


这 一 步 相 当 简 单 ， 仅 将 包含 数字 的 单词 (通过 Number() 转换 成 数字 类 型 ) 放 在 
yield 之 后 。 


Jp 
* Returns an iterable that filters the Input sequence 
* of words and only yields those that are numbers. 
区 
function* extractNumbers(words) 革 
for (let word of words) { 
If (/^[0-9]+$/.test(word)) { 
yield Number (word); 
} 


可 以 再 次 看 到 延迟 : 如 果 通 过 next() 请 求 一 个 数字 ， 那 么 在 words 中 遇 到 一 
个 数字 单词 的 时 候 ， 就 会 立马 获取 到 (通过 yield ) 这 个 数字 。 


让 我 们 从 一 组 单词 中 获取 数字 : 


> [...extractNumbers(['hello', '123', 'world', '45'])] 
[ 123, 45 ] 


注意 字符 串 转换 成 了 数字 。 
21.6.2.1.3 第 三 步 - 数字 相 加 


J 
* Returns an iterable that contains, for each number in 
* “numbers , the total sum of numbers encountered so far. 
* For example: 7, 4, -1 --> 7, 11, 10 
7 
function* addNumbers(numbers) { 
let result = 0; 
for (let n of numbers) { 
result += nN; 
yield resuilt; 


尝试 一 个 简单 的 例子 : 


> [...addNumbers([5, -2, 12])] 
[ 5, 3, 15 ] 


21.6.2.1.4 获取 输出 
生成 器 链 本 身 并 不 会 产生 输出 。 我 们 需要 通过 扩展 操作 符 主动 地 获得 输出 数据 : 


const CHARS = '2 apples and 5 oranges.'; 
const CHAIN = addNumbers(extractNumbers(tokenize(CHARS ) ) ) ， 
console,1og([.. .CHAIN] )， 

[2 


辅助 函数 logAndYield 让 我 们 能 够 判断 出 是 否 丨 的 延迟 执行 了 : 


function* lJogAndYield(iterable,. prefiIx= ) 4 
for (let item of iterable) { 
console.log(prefix + item); 
yield item; 


} 


const CHAIN2 = logAndYield(addNumbers(extractNumbers(tokenize(1o 
gAndYield(CHARS)\ 

DY > 7 

[.. .CHAIN2]; 


Op 
/> 
// 
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上 面 的 输出 表明 addNumbers 在 接收 到 '2! 和 '' 的 时 候 就 生成 了 一 个 结 
果 。 


21.6.2.2 延迟 推 入 数据 (用 作 观 察 者 的 生成 器 ) 


将 前 面 基于 输出 的 逻辑 改 成 一 个 基于 输入 的 例子 不 需要 做 太 多 事情 。 步 又 是 一 样 
的 。 但 是 不 是 以 获取 数据 而 结束 ， 而 是 以 输入 数据 而 开始 。 


正如 之 前 讲解 的 ， 如 果 生 成 器 通过 yield 接收 到 输入 ， 那 么 该 生成 器 上 的 第 一 次 
next() 调用 什么 也 不 干 。 这 就 是 为 什么 我 要 使 用 之 前 展示 的 辅助 函数 
coroutine() 来 在 此 处 创建 协同 程序 ， 它 帮助 我 们 首次 调用 next() 。 


下 面 的 函数 send() 完成 数据 推 入 。 


PE 
* Pushes the items of iterable into ‘sink , a generator. 
* It uses the generator method ‘next() to do so. 
4 
function send(iterable, sink) { 
for (let x of iterable) { 
sink.next(x); 


sink.return(); // signal end of stream 


当 生 成 器 处 理 流 的 时 候 ， 它 需要 知道 流 的 结束 点 ， 以 便于 正确 地 做 清理 工作 。 对 于 
拉 取 数据 ， 人 结 答 J 件 事情 。 对 于 推 入 数据 ， 流 的 结 
信号 通过 return() 发 出 。 


让 我 们 通过 一 个 生成 器 来 测试 send() ， 该 生成 器 只 是 简单 地 打印 出 接收 到 的 数 
据 : 


es 
* This generator logs everything that it receives via next() ， 
Bh 
const logItems = coroutine(function* () { 
ry 
while (true) { 
let item = yield; // receive item via ‘next() 
console.1log(item); 


} 
} finally { 
console.1log('DONE"'); 


} 
jp 


通过 一 个 字符 囊 (可 以 迭代 其 中 的 unicode 码 点 ) 给 logItems() 传 入 三 个 字 
符 。 


> send('abc', logItems()); 
a 

b 

C 

DONE 


21.6.2.2.1 第 一 步 - 分词 
注意 生成 器 是 如 何在 两 个 finally 子 句 中 处 理 流 结束 的 (通过 return() 发 出 


信号 ) 。 我 们 依赖 于 return() 信号 被 送 给 两 个 yield 中 的 一 个 。 否 则 ， 该 生 
成 器 将 永 不 会 结束 ， 因 为 从 行人 开始 的 无 限 循环 不 会 停止 。 





FL 


* Receives a sequence of characters (via the generator object 
* method ‘next() ), groups them into words and pushes them 
* into the generator ‘sink . 
“YH 
const tokenize = coroutine(function* (sink) { 
EI 二 
while (true) {W/ZA(A) 
letrech "yield; /AM(B) 
If (iswordchar(ch)) { 
// A word has started 
Jet word = "'， 
BY 
do { 
word += ch; 
ch = yield; // (CcC) 
} while (isWordCchar(ch)); 
ma ye 
// The word is finished. 
// We get here if 
// - the loop terminates normally 
// - the loop is terminated via ‘return() i 
nlinewe 
sink.next(word); // (D) 
} 
} 


// Ignore all other characters 


} 
Pinally 
// We only get here if the infinite loop is terminated 
/viareuume mm om 
// Forward ‘return() to ‘sink so that it is also 
// aware of the end of stream. 
sink.return(); 


} 
ep 


function IswordCchar(ch) { 
return /^[A-Za-z0-9]$/.test(ch); 
} 


0 通过 数据 推 入 来 驱动 : 当 生 成 器 接收 到 能 够 构成 一 个 单词 的 字符 数 
十 (在 行 C ) ， 就 会 把 该 单词 推 入 sink ( 行 D ) 。 也 就 是 说 ， 生 成 器 不 会 等 到 
3 所 有 的 字符 才 开 始 工作 。 


tokenize() 显示 了 生成 器 作为 线性 状态 机 的 实现 ， 工 作 得 很 好 。 在 此 场景 下 ， 
状态 机 有 两 种 状态 :“ 在 单词 内 部 "和 “ 没 在 单词 内 部 ”。 


让 我 们 对 一 个 字符 串 分 词 


> send('2 apples and 5 oranges.', tokenize(logItems())); 
2 

apples 

and 

5 

oranges 


21.6.2.2.2 第 二 步 - 获取 数字 


这 一 步 很 直接 。 


/RR 
* Receives a sequence of strings (via the generator object 
* method ‘next() ) and pushes only those strings to the generat 
ol 
* sink that are “numbers” (consist only of decimal digits). 
3 
const extractNumbers = coroutine(function* (sink) { 
try { 
while (true) { 
let word = yield; 
If (/^[0-9]+$/.test(word)) { 
sink.next (Number (word)); 
} 


} 

btmadlay a 
// Only reached via return() , forward. 
sink.return(); 


} 
}); 
同样 是 延迟 的 : 当 遇 到 数字 的 时 候 ， 就 推 入 sink 。 
让 我 们 从 一 组 单词 中 获取 数字 : 


> send(['hello', '123', 'world', '45'], extractNumbers(logItems( 


) ) ) ; 
下 .3 


45 
DONE 
注意 输入 是 一 个 字符 囊 序列 ， 输 出 是 一 个 数字 序列 。 


21.6.2.2.3 第 三 步 - 数字 求 和 


这 一 次 ， 通 过 推 入 单个 值 来 响应 流 的 结束 ， 然 后 关闭 sink 。 


Jp 
* Receives a sequence of numbers (via the generator object 
* method ‘next() ). For each number, it pushes the total sum 
* so far to the generator ‘sink . 
“HY 
const addNumbers = coroutine(function* (sink) { 
let sum = 0; 
[ER 
while (true) { 
sum += yield; 
sink.next(sum); 


} 
pnmally 
// We received an end-of-stream 
sink.return(); // signal end of stream 
} 
}); 


让 我 们 试 一 下 这 个 生成 器 : 


> send([5, -2, 12], addNumbers(logItems())); 
与 

3 

15 

DONE 


21.6.2.2.4 推 入 输入 数据 


生成 器 链 以 tokenize 开始 ， 以 logItems 结束 ， 并 且 打 印 出 所 有 接收 到 的 东 
西 。 我 们 通过 send 推 入 一 系列 字符 到 生成 器 链 : 


const INPUT = '2 apples and 5 oranges.'; 
const CHAIN = tokenize(extractNumbers(addNumbers(logItems()))); 
send(INPUT, CHAIN); 


J/ OWE 
1 

NA 了 

// DONE 


下 面 的 代码 证 明 整 个 处 理 过 程 真 的 是 延迟 发 生 的 : 


const CHAIN2 = tokenize(extractNumbers(addNumbers(logItems({ pre 
fix: -> " })))); 
send(INPUT, CHAIN2, { log: true }); 


// Output 


打印 出 来 的 内 容 显 示 addNumbers 在 接收 到 '2' 和 '' 的 时 候 就 立马 产生 一 
个 结果 。 


21.6.3 通过 生成 器 实现 的 多 任务 协作 


21.6.3.1 推 入 长 时 间 和 运行 的 任务 


在 本 例 中 ， 我 们 创建 一 个 在 web 页 面 显 示 的 计数 器 。 我 们 不 断 地 优化 最 初 的 版 本 ， 
直到 得 到 一 个 多 任务 协作 的 版 本 ， 并 且 不 会 阻塞 主线 程 和 用 户 界 面 。 


下 面 是 web 页面 的 一 部 分 ， 在 其 中 展示 计数 器 : 
<body> 


Counter: <span id="counter"></span> 
</body> 


下 面 的 函数 不 停 地 计数 : 


function countUp(start = 0) { 
const counterSpan = 
while (true) { 


counterSpan.textContent = String(start); 
Start++， 


document ,querySelector( '#counter ' ) ， 


如 果 你 运行 这 个 函数 ， 它 会 完全 阻塞 它 所 运行 在 的 用 户 界面 线程 ， 并 且 失 去 响应 。 
让 我 们 用 生成 器 实现 同样 的 功能 ， 该 生成 器 通过 yield 定期 暂停 (后 面 会 展示 一 
个 用 于 运行 该 生成 器 的 调度 函数 ) : 


function* countUp(start = 0) { 


const counterSpan = document.querySelector('#counter'); 
while (true) { 


counterSpan.textContent = String(start); 
Start++， 


yield; // pause 


让 我 们 稍微 地 改进 一 下 。 把 用 户 界面 的 更 新 挪 到 另 一 个 生成 器 displayCounter 
里 面 ， 通 过 yield* 调用 该 生成 器 。 由 于 是 一 个 生成 


器 函数 ， 所 以 也 能 够 暂停 。 


function* countUp(start = 0) { 
while (true) { 
Start++， 
yield* displayCounter(start); 
} 
} 


function* displayCounter(counter) { 
const counterSpan = document .querySeJlector( '#counter ' ); 


counterSpan.textContent = String(counter); 
yield; // pause 


最 后 ， 下 面 是 一 个 调度 函数 ， 可 以 用 它 来 调用 countUp() 。 生 成 器 执行 的 每 一 
Ce ne ， 该 任务 通过 setTimeout() 创建 。 这 意味 着 用 户 界 办 
面 可 以 调度 其 ， 并 且 保 持 可 响应 。 


functaonarunmgeneratorobject it 
If (!generatorObject.next().done) { 
// Add a new task to the event queue 
setTimeout(function () { 
run(generatorobject ) ; 
1 1000); 


有 了 run 的 帮助 ， 我 们 得 到 了 一 个 近乎 无 尽 的 计数 器 ， 并 且 不 会 阻塞 用 户 界面 : 


run(CcountUp( ) ) ， 


你 可 以 在 线 运行 这 个 例子 。 


21.6.3.2 生成 器 版 本 的 多 任务 协作 和 Node.js 风格 的 回调 


如 果 你 调用 一 个 生成 器 函数 (或 者 方法 ) ， 该 函数 (或 方法 ) 并 不 能 访问 到 它 的 生 


成 器 对 象 ; 它 的 this 与 它 是 普通 函数 时 的 this 一样。 一 种 变通 方法 就 是 通 


过 yield 将 生成 器 对 象 传 入 该 生成 器 。 


下 面 的 Node.js 脚本 使 用 了 这 种 技术 ， 但 是 将 生成 器 包 衰 在 一 个 回调 中 ( next 
， 行人) 。 必 须要 通过 babel-node 运行 。 


import {readFile} from 'fs',; 
Jet fileNames = process.argv.slice(2); 


mum(funeceion mn 
let next = yield; 
for (let f of fileNames) { 
let contents = yield readFile(f, { encoding: 'utf8' }, nN 
ext ) ， 
console.]log('##### ' + f); 
console.log(contents); 
} 
}); 


在 行 A， 我 们 使 用 一 个 Node.js 回调 风格 的 的 回调 函数 。 该 回调 函数 使 用 生成 器 
象 唤醒 生成 器 ， 你 可 以 看 一 下 run() 的 实现 代码 : 


对 


function run(generatorFunction) { 
Jet generatorobject = generatorFunction(); 


// Step 1: Proceed to first ‘yield 
generatorObject.next(); 


”H/oStep2 Pass ma functiontehnadtne generacor cam use as 
a callback 
function nextFunction(error, result) { // (A) 
if (error) { 
generatorObject.throw(error); 
} else { 
generatorObject.next(result); 
} 


generatorobject.next(nextFunction ) ; 


// Subsequent invocations of ‘next() are triggered by next 
Function- 


} 


21.6.3.3 通信 顺序 进程 ( CSP ) 


js-csp 将 通信 顺序 进程 ( CSP ) 引入 了 JavaScript 。 CSP 是 一 种 多 任务 协作 的 方 
式 ， 类 似 于 ClojureScript 的 core.async 和 Go 的 goroutine 。 js-csp 有 两 处 抽 
象 : 


e@ 进程 : ， 通过 将 生成 器 函数 传递 给 调 go() 来 实现 。 
e@ 通道 : 用 于 进程 通信 的 队列 。 通 过 调用 chan() 创建 通道 。 


作为 一 个 示例 ， 让 我 们 使 用 CSP 处 理 DOM 事件 ， 这 是 一 种 让 人 联想 到 函数 式 编 

程 的 方式 。 下 面 的 代码 使 用 函数 listen() (将 在 后 面 展 示 ) 创建 一 个 输出 

上 事件 的 通道 ， ee take 持续 地 获得 输出 内 
多 亏 了 yield ， 进 程 才 会 阻塞 直到 通道 有 输出 。 


Import csp from 'js-csp'; 


csp.go(function* () { 
let element document .querySelector('#uiElement1' )，; 
Jet channel listen(element, 'mousemove'); 
while (true) { 
let event = yield csp.take(channel); 
let x = event.layerX || event.clientxX; 
let y = event.layerY || event.clientY 
element.textContent = ‘${x}, ${y}; 


J ye 





listen() 的 实现 如 下 所 示 : 


function listen(element, type) { 
let channel = csp.chan(); 
element.addEventListener(type, 
event => { 
csp.putAsync(channel, event); 


je 


return channel; 


此 例 来 自 James Long 的 博客 《 Taming the Asynchronous Beast with CSP 
Channels in JavaScript 》 。 查 阅 这 篇 博客 以 获得 更 多 关于 CSP 的 信息 。 
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21.7 基于 迭代 API 的 继承 关系 (包含 生成 器 ) 


下 面 的 图 展示 了 在 ECMAScript 6 中 各 种 对 象 之 间 的 关系 (此 图 基于 ECMAScript 
规范 中 Allen Wirf-Brock 的 图 ) : 


说 明 : 
。 空心 箭头 表示 两 个 对 象 的 继承 关系 。 换 名 话说 ， 从 X 指向 y 的 箭头 意味 着 
Object .getPrototypeof(x) === y 。 


。 圆 括号 表示 当前 被 包 起 来 的 对 象 是 存在 的 ， 但 是 不 能 通过 全 局 变量 来 访问 。 
e 带 有 instanceof 字眼 的 箭头 如 果 从 X 指向 Y， 就 表明 x instanceof y 
o 0 instanceof C 实际 上 就 相当 于 C,prototype.isPrototype0of(o) 
e。 带 有 prototype 字眼 的 箭头 如 果 从 X 指 向 yY， 就 表明 
x.prototype === 9 


此 图 揭示 了 两 个 有 趣 的 事实 : 


第 一 个 ， 生 成 器 辑 数 g 很 像 构造 函数 (其 至 可 以 通过 new 来 调用 它 ， 这 和 直接 
调用 的 效果 是 一 样 的 ) : 它 创 | 实例 ， 添 加 到 g.prototype 
上 的 方法 成 为 原型 方法 ， 等 等 


> function* g() 人 

> g.prototype.hello = function () { return ‘'hi!'}; 
> let obj = g(); 

> obj instanceof 9g 

true 

> obj.hello() 

ha 


第 二 个 ， 如 果 你 想 给 所 有 的 生成 器 对 象 添加 方法 ， 最 好 将 这 些 方法 添加 到 
(Generator .object) 上 。 访 问 这 个 对 象 的 一 种 方式 如 下 


> let Generator_prototype = 0bject.getPrototypeof(function* () { 
}).prototype; 

> Generator_prototype.hello = function () { return ‘hi!'}; 

> let generatorobject = (function* () {})(); 

> generatorObject.hello() 

:hl 


21.7.1 lteratorPrototype 


在 图 中 没有 (Iterator) ， 因 为 不 存在 这 样 的 对 象 。 但 是 ， 考 虑 到 
instanceof 的 工作 原理 ， 同 时 也 因为 (IteratorPrototype) 是 g1() 的 原 
型 ， 你 仍然 可 以 说 g1() 是 Iterator 的 实例 。 


ES6 中 所 有 的 迭代 器 在 原型 链 中 都 有 (IteratorPrototype) 。 这 个 对 象 是 可 迁 
代 的 ， 因 为 它 有 下 面 的 方法 。 因 此 ， 所 有 的 ES6 迭代 器 都 是 可 迭代 的 ( 因此， 你 
可 以 在 这 些 对 象 上 应 用 for-of ) 。 


[Symbol.iterator]() { 
return this; 
} 


规范 推荐 使 用 如 下 代码 访问 (IteratorPrototype) 


const proto = Object.getPrototypeof.bind(Object); 
let IteratorPrototype = proto(proto([][Symbol.iterator]())); 


也 可 以 使 用 : 


Jet IteratorpPrototype = proto(proto(function* () {}.prototype)); 


引用 ECMAScript 6 规范 中 的 话 : 


ECMAScript 代码 可 能 定义 继承 自 lteratorPrototype 的 对 象 。lteratorPrototype 
对 象 提 供 了 一 个 给 所 有 可 和 迭代 对 象 添 加 额外 方法 的 地 方 。 


在 后 续 的 ECMAScript 版 本 中 ， 也 许可 以 直接 获取 到 lteratorPrototype ， 并 且 包 侈 
一 些 工具 方法 ， 比 如 map() 和 filter() (来 源 ) 。 

21.7.2 生成 器 中 的 this 值 

一 个 生成 器 函数 混合 了 两 方面 的 内 容 : 


1、 它 是 一 个 设置 和 返回 生成 器 对 象 的 函数 。 
2、 它 包含 了 生成 器 对 象 执行 过 程 的 代码 。 


这 就 是 为 什么 生成 器 函数 中 的 this 值 不 太 好 猜测 的 原因 。 


在 有 函数 调用 和 方法 调用 中 ， this 值 和 其 作为 普通 函数 ( 非 生 成 器 函数 ) 的 时 候 
一 致 : 


function* gen() { 
Usenstriece /just inease 
yield this; 

} 


// Retrieve the yielded value via destructuring 
let [functionThis] = gen(); 
console.log(functionThis); // undefined 


Jet obj = { method: gen }; 


let [methodThis] = obj.method!(); 
console.log(methodThis === obj); // true 


如 果 通 过 new 调用 一 个 生成 器 函数 ， 那 么 在 函数 中 访问 this 将 会 得 到 一 个 
ReferenceError 错误 ( 源 自 ES6 规范 ) 


function* gen() { 
console.log(this); // ReferenceError 
} 


new gen(); 


有 一 个 变通 的 方法 ， 就 是 把 生成 器 总数 包 庄 在 一 个 首 通 函数 里 面 ， ， 通过 next() 
传 入 生成 器 自身 的 生成 器 对 象 。 这 意味 着 生成 器 必须 使 用 第 一 个 yield 拿 到 自身 
的 生成 器 对 象 : 


let generatorobject = yield; 


21.8 代码 风格 : 空格 在 星 号 之 前 还 是 之 后 
合理 的 并 且 合 法 的 放置 星 号 的 方式 是 : 
@ 星 号 两 边 保 留 空 格 : 


EUmetiong noo yy) 0 0 
。 星 号 之 前 保留 空格 : 


Functlion foo Ye 


funection Wioo(Ke Vy 9 


unceomn Foo ey 0 


让 我 们 指出 哪 种 形式 对 于 哪 种 解构 来 说 是 合理 的 ， 并 且 解 释 为 什么 。 


21.8.1 生成 器 函数 的 声明 和 表达 式 


此 处 ， 使 用 星 号 的 原因 是 因为 generator (或 者 其 它 类 似 的 单词 ) 没有 被 用 作 
关键 字 。 如 果 可 以 作为 关键 字 的 话 ， 那 么 生成 器 函数 的 声明 就 像 这 样子 : 


generator foo(x, y) { 
} 
ECMAScript 6 使 用 星 号 标记 的 function generator 。 因此， 


function* 可 以 看 做 是 generator 的 同义词 ， 这 使 得 生成 器 辑 数 声明 的 推荐 
写法 就 像 下 面 这 样 。 


funeton fioo(e yn 


} 


匿名 生成 器 函数 表达 式 的 格式 就 像 这 样 : 
const foo = functron Cy Of 


} 


21.8.2 生成 器 方法 定义 
当 书 写生 成 器 方法 定义 的 时 候 ， 我 推荐 如 下 的 格式 : 


let obj = { 
* generatorMethod(x, y) { 


} 
J 
关于 在 星 号 之 后 放 一 个 空格 ， 有 三 个 理由 。 


首先 ， 星 号 不 应 该 是 方法 名 的 一 部 分 。 一 方面 ， 它 不 是 生成 器 部 数 名 字 的 一 部 分 。 
另 一 方面 ， 仅 在 定义 生成 器 的 时 候 才 会 涉及 到 星 号 ， 在 使 用 的 时 候 并 不 会 涉及 到 。 


第 二 点 ， 生 成 器 方法 定义 是 如 下 语法 的 缩写 。 (为 了 展现 我 的 观点 ， 我 给 函数 表达 
式 添加 了 多 余 的 名 字 。) 


let obj = { 
generatorMethod: function* generatorMethod(x, y) { 
} 
}; 
如 果 方 法 定义 要 省 略 function 关键 字 ， 那 么 星 号 后 面 就 应 该 跟 一 个 空格 。 
第 三 点 ， 生 成 器 方法 定义 在 语法 上 类 似 于 getters 和 setters (这 两 个 语法 
在 ECMAScript 5 中 就 可 用 了 ) 


let obj = { 
get foo() { 


set foo(value) { 
} 
}; 


关键 字 get 和 set 可 以 看 做 普通 方法 定义 的 修饰 器 。 同 理 ， 星 号 也 是 这 样 的 
一 个 修饰 在 。 


21.8.3 用 于 谈 套 调用 的 yield 的 书写 格式 
下 面 是 一 个 生成 器 函数 通过 yield 递归 调用 自身 的 例子 : 


hunctnon ioo(C 


yield* foo(x - 1); 


星 号 标记 出 不 一 样 的 yield 操作 符 ， 这 就 是 为 什么 上 面 的 代码 是 合理 的 的 原因 。 


21.8.4 标记 生成 器 函数 和 方法 


Kyle Simpson ( @getify ) 提出 了 有 趣 的 看 法 : 在 函数 或 方法 调用 的 时 候 ， 我 们 经 
常会 在 后 面 加 上 括号 ， 例 如 Math.max() ?， 而 对 于 生成 器 函数 和 方法 而 言 ， 在 前 

面 加 上 星 号 不 是 更 合理 吗 ? 例 如 : 在 上 一 子 节 我 们 不 应 该 写成 *foo() 来 表明 是 
一 个 生成 器 的 调用 吗 ? 让 我 来 驶 斥 这 个 观点 。 


当 需 要 调用 一 个 返回 可 和 迭代 对 象 的 函数 的 时 候 ， 生 成 器 是 几 个 可 选项 中 唯一 的 一 
个 。 我 认为 最 好 不 要 抛弃 这 种 标记 函数 名 的 实现 细节 。 

而 有 全 ， 在 调用 生成 器 函数 的 时 候 ， 你 不 会 使 用 星 号 ， 但 是 使 用 了 括号 。 

最 后 ， 星 号 并 不 会 提供 有 用 的 信息 - yield* 也 可 用 于 返回 可 和 迭代 对 象 的 函数 。 


但 是 标记 返回 可 迭代 对 象 的 函数 3 或 方法 名 (包括 生成 器 ) 可 能 是 合理 的 。 例 如 ， 加 
上 Iter 前 级 。 


我 布 望 本 章 使 你 相信 生成 器 是 有 用 的 ， 拥 有 多 种 能 力 的 工具 。 


我 喜欢 生成 器 实现 多 任务 协作 的 方式 : 在 异步 调用 的 时 候 阻 塞 。 我 认为 这 是 正确 的 
异步 调用 方式 。 和 项 望 未 来 JavaScript 在 这 个 方向 上 越 走 越 远 。 


21.10 深 


21.10 深入 阅读 
本 章 来 源 : 


。 [1] 《Async Generator Proposal 》， 作 者 Jafar Husain 

e。[2] 《A Curious Course on Coroutines and Concurrency 》， 作 者 David 
Beazley 

。 [3] 《 Why coroutines won't work on the web 》， 作 者 David Herman 


24 用 于 异步 编程 的 Promise 


本 章 介 绍 了 用 Promise 做 异步 编程 的 一 般 知 识 点 ， 着 重 介 绍 了 ECMAScript 6 的 
Promise API 。 上 一 章 讲解 了 JavaScript 中 错 步 编程 的 基础 知识 。 在 本 章 中 遇 到 不 
理解 的 东西 ， 可 以 参考 上 一 章 内 容 。 


下 面 的 函数 通过 Promise 异步 地 返回 结果 : 


es3 


function asyncFunc() { 
return new Promisel( 
function (resolve, reject) { 
resolve(value); // success 


reject(error); // failure 


J 


像 下 面 这 样 调用 asyncFunc() 


asyncFunc() 
‘then(value => { /* success */ }) 
.Ccatch(error => { /* failure */ }); 


24.1.1 处 理 Promise 数组 


Promise.,all() 使 你 能 够 应 对 Promise 数组 。 
例如 ， 可 以 通过 Array 的 方法 map() 创建 一 个 Promise 数组 : 


let fileUrls = [ 


'http://example.com/file1.txt', 
'http://example.com/file2.txt" 
]; 


let promisedTexts = fileUrls.map(httpGet); // Array of Promises 


如 果 对 这 个 数组 调用 


Promise.all() 
得 到 一 个 值 数组 : 


， 那么 在 所 有 Promise 成 功 完 成 之 后 ， 会 





Promise.all(promisedTexts) 
// Success 
.then(texts => { 
for (let text of texts) { 
console.1log(text ); 
} 
}) 


2/ Failure 
.Catch(reason => { 
// Receives first rejection among ‘promisedTexts 


J ye 
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24.2 Promise 


Promise 是 一 种 帮助 处 理 一 类 特定 的 异步 编程 的 方式 : 一 个 函数 (或 者 方法 ) 异步 
地 返回 结果 。 为 了 实现 这 样 的 函数 ， 需 要 返回 一 个 Promise ， 它 是 最 终 返 回 结果 的 
一 个 占 位 符 对 象 。 函 数 的 调用 者 在 Promise 对 象 上 注册 回调 ， 一 旦 结果 计算 出 来 
了 ， 就 可 以 收 到 通知 。 函 数 通过 Promise 发 送 结果 。 


JavaScript Promise 的 实际 标准 叫做 Promise/A+。 ECMAScript 6 的 Promise API 
遵循 这 个 标准 。 


24.3 第 一 个 例子 


让 我 们 看 下 第 一 个 例子 ， 初 步 了 解 使 用 Promise 会 是 怎么 样 的 。 
在 Node.js 风格 的 回 到 中 ， 弄 步 地 读 取 一 个 文件 的 内 容 看 起 来 像 这 样 : 


fs.readFile('config.json', 
function (error, text) 1{ 
if (error) { 
console.error('Error while reading config file'); 
} else { 
ta 
let obj = JSON.parsel(text); 


console.1og(JSON.stringify(obj, null, 4)); 
peatehnn (ed 


console.error('Invalid JSON in file'); 
} 


} 
}); 


使 用 Promise ， 相 同 功能 的 实现 像 这 样 : 


readFilLePromisified(' config.json ') 
.then(function (text) { // (A) 
let obj = JSON.parsel(text); 
console.1log(JSON.stringify(obj, null, 4)); 


.Catch(function (reason) { // (B) 
// File read error or JSON SyntaxError 
console.error('An error occurred', reason); 


}); 


仍然 有 回调 ， 但 是 这 些 回 调 通过 函数 返回 结果 ( Promise ) 上 的 方法 ( then() 

和 catch() ) 来 提供 。 行 B 的 错误 回调 在 两 个 方面 是 比较 方便 的 : 首先 ， 仅 用 
于 处 理 错 误 (对 比 一 下 之 前 例子 中 的 if(error) 和 try-catch ) ;其 次 ， 可 
以 在 某 一 个 地 方 处 理 readFilePromisified() 和 行人 A 处 的 回调 产生 的 错误 。 


readFilePromisified() 的 代码 在 后 面 展示 。 


24.4 创建 和 使 用 Promise 

让 我 们 看 一 下 生产 端 和 消费 端 是 如 何 操作 Promise 的 。 

24.4.1 生成 Promise 

作为 一 个 生产 者 ， 需 要 创建 一 个 Promise ， 然 后 通过 它 发 送 最 终结 果 : 


let promise = new Promise( 
function (resolve, reject) { // (A) 


if ( 


resolve(value); // success 
} else { 

reject(reason); // failure 
} 


}); 


一 个 Promise 总 是 处 于 三 种 状态 (互相 排斥 ) 中 的 一 种 : 


。 等 待 ( pending ) : 结果 还 没 计算 出 来 
e 成 功 完成 ( fullfilled ) : 结果 成 功 地 被 计算 出 来 了 
。 被 驶 回 ( rejected ) : 在 计算 的 过 程 中 失败 了 


如 果 一 个 Promise 已 经 成 功 完 成 或 者 被 驳回 了 了， 那么 它 就 会 保持 这 个 状态 不 再 变化 
了 。 一 个 Promise 只 能 有 一 次 机 会 变 稳定 ， 然 后 就 一 直 保 持 稳 定 了 。 接 下 来 试图 使 
它 变 稳定 的 操作 都 不 会 有 效果 。 


new Promise() 《开始 于 行 A) 的 参数 被 称 为 执行 者 ( executor ) 


e。 如 果 计 算 过 程 顺利 执行 ， 执 行者 通过 resolve() 发 送 执 行 结果 。 这 通常 会 
将 Promise 置 为 成 功 完 成 的 状态 (如果 返回 一 个 Promise ， 可 能 就 不 会 这 
样 ， 就 像 后 面 讲 解 的 ) 。 

e@ 如 果 出 错 了 ， 执 行者 通过 reject() 通知 Promise 。 这 总 是 会 将 Promise 置 
为 被 驳回 状态 。 


24.4.2 消费 Promise 


作为 一 个 Promise 的 消费 者 ， 会 在 通过 then() 注册 的 回调 中 接收 到 成 功 完成 或 
者 被 驱 回 的 通知 : 


promise.then( 
Funetnone (veal) /iumente 
function (reason) { /* rejection */ } 


) 


对 于 异步 了 数 (最 终结 果 是 一 次 性 的 ) ， 让 Promise 如 此 有 用 的 原因 是 ， 一 旦 
Promise 稳定 了 ， 就 不 会 变化 了 。 而 且 ， 没 有 任何 竞 态 条 件 ， 因 为 在 Promise 稳定 
之 前 或 之 后 调用 then() 方法 是 无 关 紧 要 的 : 


e 在 Promise 稳定 之 前 注册 的 回调 ， 一 旦 Promise 变 为 稳定 状态 ， 就 会 收 到 通 
知 。 

e 在 Promise 稳定 之 后 注册 的 回调 ， 会 “立即 ?接收 到 缓存 下 来 的 稳定 状态 值 ( 回 
调 函 数 像 任务 队列 一 样 被 调用 ) 。 


24.4.3 仅 处 理 成 功 完 成 或 被 驶 回 
如 果 仅 对 成 功 完成 感 兴 趣 ， 可 以 忽略 then() 的 第 二 个 参数 : 


promise.then( 
EUnGenonmngaUey uinlimentee .nn 


); 


如 果 仅 对 被 驶 回 感 兴趣 ， 可 以 省 略 第 一 个 参数 。 catch() 方法 是 一 种 完成 相同 功 
能 的 更 紧凑 方式 。 


promise.then( 
nwa 
funetrony(rveason) ee / reecenon .ne 


) 


// Equivalent: 
promise.catch( 
function (reason) { /* rejection */ } 


) 


推荐 用 then() 处 理 成 功 完 成 ， catch() 处 理 错误 ， 因 为 这 样 就 给 回调 打上 了 
贴切 的 标签 ， 也 因为 可 以 同时 处 理 多 个 Promise 的 了 驱 回 (后面 详细 讲解 ) 。 


24.5 例子 


在 我 们 更 加 深入 了 解 Promise 之 前 ， 让 我 们 在 几 个 例子 里 面 使 用 已 经 学 到 的 知识 。 


本 节 的 一 些 例子 可 以 在 GitHub 仓库 promise-examples 中 找到 。 


24.5.1 例子 : Promise 化 fs.readFile() 


下 面 的 代码 是 一 个 内 置 的 基于 Promise 版 本 的 Node.js 函数 fsS.readFile()。 


Import {readFile} from "fs '， 


function readFilepPromisified(filename) { 
return new Promise( 
function (resolve, reject) { 
readFile(filename, { encoding: 'utf8"' }, 
(error, data) => { 
if (error) { 
reject(error); 


resolve(data); 
}); 
}); 


a 


readFilePromisified() 像 下 面 这 样 使 用 : 


readFilePromisified(process.argv[2]) 
,then(text => { 

console.1log(text); 
}) 


.Ccatch(error => { 


console.log(error ); 


}); 


24.5.2 例子 : Promise 化 XMLHttpRequest 


下 面 是 一 个 基于 Promise 的 函数 ， 通 过 基于 事件 的 XMLHttpRequest API 执行 
HTTP GET 请 求 : 


function httpGet(url) { 
return new Promisel( 
function (resolve, reject) { 
Jet request = new XMLHttpRequest(); 
request.onreadystatechange = function () { 
if (this.status === 200) { 
// Success 
resolve(this.response); 
} else { 
// Something went wrong (404 etc.) 
reject(new Error(this.statusText)); 
} 
} 
request.onerror = function () { 
reject(new Error( 
'XMLHttpRequest Error: '+this.statusText)); 
}; 
request.open('GET', ur1); 
request. send( ); 


}); 


下 面 是 使 用 httpGet() 的 方式 : 


httpGet('http://example.com/file.txt') 


.then( 
function (value) { 
console.log('Contents: ' + value); 
}, 


function (reason) { 
console.error('Something went wrong', reason); 


}); 


24.5.3 例子 : 延迟 操作 


让 我 们 将 setTimeout() 实现 为 基于 Promise 的 函数 delay() (类 似 于 
Q.delay() ) 。 


function delay(ms) { 
return new Promise(function (resolve, reject) { 
setTimeout(resolve, ms); // (A) 
}); 
} 


// Using delay() : 
delay(5000) ,then(function () { // (B) 
console.log('5 seconds have passed!') 
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注意 ， 在 行 A， 调 用 resolve 的 时 候 没 传 参数 ， 这 和 resolve(undefined) 
是 一 样 的 。 在 行 B 也 不 需要 成 功 完成 的 结果 值 ， 所 以 简单 地 忽略 它 。 这 里 仅仅 接收 
通知 就 够 了 。 


24.5.4 例子 : Promise 起 时 


function timeout(ms, promise) { 
return new Promise(function (resolve, reject) { 
promise.then(resolve); 
setTimeout(function () { 
reject(new Error('Timeout after '+ms+' ms')); // (A) 
}, ms); 


}); 


注意 ， 在 超时 之 后 的 驳回 (行人 A ) 并 不 会 取消 请 求 ， 


24.6 链 式 使 用 Promise 


现在 已 经 准备 好 深入 Promise 特性 了 。 首 先 探 索 一 下 如 何 链 式 使 用 Promsie 。 
方法 调用 的 结果 : 


PpP.then(onFulfilled, onRejected) 


是 一 个 新 的 Promise Q 。 这 意味 着 你 可 以 通过 在 Q 上 调用 then() 来 维持 基于 
Promise 的 控制 流 : 


e。 如果 onFulfilled 或 onRejected 成 功 返回 ， 则 Q 变 为 fulfilled 状态 ， 
相应 的 结果 值 就 是 前 面 函数 的 返回 值 。 
e 如 果 onFulfilled 或 onRejected 抛 出 异常 ， 则 Q 变 为 rejected 状态 。 


24.6.1 用 普通 的 值 将 Q 置 为 fulfilled 状态 


如 果 用 一 个 普通 的 值 将 then() 返回 的 Promise Q 置 为 fulfilled 状态 ， 可 以 追加 
一 个 then() 来 得 到 那个 值 : 


asyncFunc() 

then(function (value1) { 
etunnn li23s 

}) 


.then(function (value2) { 
console.1og(value2); // 123 
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24.6.2 用 带 有 then 方法 的 对 象 将 Q 置 为 fulfilled 状态 


也 可 以 用 带 有 then 方法 的 对 象 尺 将 then() 返回 的 Promise Q 置 为 fulfilled 状 
态 。 可 then 化 (thenable ) 实体 就 是 任何 一 个 有 Promise 风格 方法 then() 的 
对 象 。 因 此 ，Promise 是 可 then 化 的 。 用 R 置 为 fulfilled 状态 ( 例 J 
onFulfilled 中 返回 R ) 意味 着 R 被 插 在 Q “后 面 " : R 的 稳定 消息 会 转发 给 

的 onFulfilled 和 onRejected 回调 。 Pe Q 变 成 了 R。 


这 种 机 制 的 主要 用 途 就 是 扁平 化 内 衣 的 then() 调用 ， 就 像 下 面 的 例子 


aSsyncFunc1( ) 

,then(function (value1) { 
asyncFunc2() 
‘then(function (value2) { 


}); 
}) 


扁平 化 的 版 本 看 起 来 像 这 样 : 


asyncFunc1() 
.then(function (value1) { 

return asyncFunc2(); 
}) 


.then(function (value2) { 


>) 


24.6.3 从 onRejected 将 QQ 置 为 fulfilled 状态 


在 错误 处 理 器 中 返回 的 内 容 变 成 了 一 个 成 功 完成 的 值 (而 不 是 被 驳回 的 值 ) 。 这 使 
得 可 以 在 执行 失败 的 时 候 指 定 默认 值 : 


retrieveFileName() 

.Ccatch(function () { 
// Something went wrong, use a default value 
return 'Untitled.txt'; 


}) 


.then(function (fileName) { 


}); 


24.6.4 通过 抛 出 异常 将 Q 置 为 rejected 状态 
在 then() 的 两 个 回调 参数 中 抛 出 的 异常 会 传递 给 下 一 个 错误 处 理 器 : 


asyncFunc() 
.then(function (value) 1 
throw new Error(); 


.Ccatch(function (reason) { 
// Handle error here 


}); 


24.6.5 执行 者 中 的 异常 


在 执行 者 ( new Promise() 的 回调 ) 中 抛 出 的 异常 传递 给 该 执行 者 负责 管理 的 
Promise : 


new Promise(function (resolve, reject) { 
throw new Error(); 


.Catch(function (err) { 
// Handle error here 


} ye 


24.6.6 链 式 错误 


可 以 有 一 个 或 多 个 then() 方法 调用 ， 并 且 这 些 方法 调用 中 都 没有 传递 错误 处 理 
器 。 此 时 错误 就 会 一 直 往 下 传递 ， 直 到 遇见 一 个 错误 处 理 器 。 


asyncFunc1() 
.then(asyncFunc2) 
.then(asyncFunc3) 
.Catch(function (reason) { 
// Something went wrong above 


}); 


24.7 组 合 


本 节 讲 述 了 如 何 将 已 有 的 Promise 组 合 起 来 创建 新 的 Promise 。 我 们 已 经 遇 到 了 
一 种 组 合 Promise 的 方法 : 通过 then() 依次 链 式 连接 。 Promise.all() 和 
Promise.race() 提供 了 另外 的 组 合 方式 。 


24.7.1 map() 与 Promise.all() 结合 


关于 Promise 一 件 很 好 的 事情 就 是 很 多 同步 的 工具 仍然 有 效 ， 因 为 基于 Promise 
的 函数 有 返回 结果 。 例 如 ， 可 以 使 用 数组 方法 map() 


let fileUrls = [ 


'http://example.com/file1.txt', 


'http://example.com/file2.txt' 
]; 
let promisedTexts = fileUrls.map(httpGet); 


promisedTexts 是 一 组 Promise 。 


Promise.,all() 用 一 个 Promise 数组 (可 
then 化 的 和 其 它 值 都 通过 Promise,resolve() 被 转换 成 了 Promise ) 作为 参 
数 ， 一 旦 所 有 的 Promise 都 成 功 完 成 了 ， 它 就 变 为 fulfilled 状态 ， 返 回 结果 是 这 组 


Promise 的 返回 结果 的 一 个 数组 : 


Promise.all(promisedTexts) 
‘then(texts => { 
for (let text of texts) { 
console.1log(text ); 


} 
}) 
.Catch(reason => { 

// Receives first rejection among the Promises 
}); 


24.7.2 利用 Promise.race() 实现 超时 


Promise.race() 使 用 一 个 Promise 数组 (可 then 化 的 和 其 它 值 都 通过 
Promise,resolve() 被 转换 成 了 Promise ) 作为 参数 ， 然 后 返回 一 个 Promise 
P。 传 入 的 Promise 数组 中 只 要 有 一 个 Promise 变 为 稳定 状态 ， 就 会 将 稳定 状态 信 

息 传 递 给 返回 的 那个 Promise P 。 


让 我 们 使 用 Promise.race() 实现 超时 : 


24.7 组 合 


Promise.race([ 
httpGet('http://example.com/file.txt"'), 
delay(5000).then(function () { 

throw new Error('Timed out') 


}); 
.then(function (text) { .:.. }) 
.catch(function (reason) { :1:. }); 
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24.8 Promise 总 是 异步 的 


一 个 Promise 库 完 全 可 以 决定 计算 结果 是 同步 地 (立即 ) 传递 给 Promise 接应 

器 ， 还 是 异步 地 (在 当前 代码 片段 执行 完 之 后 ) 。 但 是 ，Promises/A+ 规范 要 求 总 
是 使 用 后 一 种 执行 模式 。 规 范 通 过 下 列 用 于 then() 方法 的 必要 条 件 陈述 了 这 个 
问题 : 


onFulfilled 或 onRejected 一 定 不 能 被 调用 ， 直 到 执行 上 下 文 堆栈 仅 包 
含 平台 代码 。 


这 意味 着 你 的 代码 可 以 依赖 于 代码 执行 的 完整 性 语义 ( run-to-completion 
semantics ) (如 同 第 一 部 分 讲解 的 ) 


， 并 且 这 种 链 式 的 Promise 并 不 会 阻碍 其 它 
任务 的 执行 。 


24.9 各 忘 单 : ECMAScript 6 Promise API 


本 节 给 出 ECMAScript 6 Promise API 的 一 个 概览 ， 和 规范 中 描述 的 一 样 。 


24.9.1 Promise 相关 术语 


Promise API 是 关于 异步 返回 结果 的 。 一 个 Promise 对 象 (简称 Promise ) 就 是 一 
个 结果 的 替身 ， 结 果 将 会 通过 这 个 对 象 返回 。 


状态 : 


e 一 个 Promise 总 是 处 于 三 个 互相 排斥 状态 中 的 一 种 : 
o 在 结果 就 绪 之 前 ，Promise 变 为 "未 完成 ( pending ) "状态 。 
o 计算 结果 就 绪 ，Promise 变 为 “已 完成 ( resolved 或 fulfilled ) "状态 。 
o 如 果 发 生 了 错误 ，Promise 变 为 "已 失败 〈 rejected ) ”状态 。 
e@ 如 果 “ 所 有 事情 都 完成 了 ”( 也 就 是 说 要 么 完成 要 么 失败 ) ， 那 么 Promise 就 稳 
定 了 。 
e。 Promise 仅 会 稳定 一 次 ， 然 后 就 保持 不 变 了 。 


状态 改变 的 回调 函数 : 


e Promise 回调 函数 就 是 利用 Promise 的 then() 方法 注册 的 那些 函数 ， 在 
Promise 完成 或 失败 的 时 候 会 调用 相应 的 回调 函数 。 

e 一 个 thenable 实体 是 一 个 有 Promise 风格 的 then() 方法 的 对 象 。 API 只 
关心 在 Promise 稳定 的 时 候 能 够 收 到 通知 ， 因 此 只 需要 thenable 实体 。 


改变 状态 : 有 两 种 操作 可 以 改变 Promise 的 状态 。 在 执行 了 一 次 两 种 操作 中 的 一 种 
之 后 ， 将 来 再 执行 这 两 种 操作 中 的 任何 一 种 都 没有 效果 了 。 


e Promise 失败 意味 着 Promise 变 为 了 已 失败 状态 。 
e Promise 完成 有 不 同 的 效果 ， 依 赖 于 完成 的 值 : 
o 完成 的 值 是 一 个 普通 的 ( 非 thenable 的 ) 值 ， 会 使 当前 Promise 变 为 已 
完成 
o Promise P 完成 之 后 得 到 一 个 thenable 的 T， 意 味 着 已 不 能 再 变 为 已 完 
成 状态 ， 并 且 后 面 将 会 追踪 下 的 状态 ， 包 括 下 的 已 完成 和 已 失败 的 值 。 一 
旦 丁 稳 定 了 ， 相 应 的 PP 的 回调 函数 就 会 被 调用 (或 者 ， 如 果 已 经 稳定 ， 则 
会 立马 调用 ) 。 


24.9.2 Promise 构造 器 
Promise 构造 器 像 下 面 这 样 调用 : 


let p = new Promise(function (resolve, reject) { :':. }); 


这 个 构造 器 的 回电 函数 被 称 作 执 行者 ( executor ) 。 执 行者 可 以 使 用 它 的 参数 来 使 
新 的 让 HIS p 完成 或 失败 。 


e@ resolve(x) 使 p 完成 ， 并 返回 x 作为 结 
o 如 果 x 是 thenable 的 ， 它 的 稳定 消息 就 会 人 p (这 会 触发 通 
then() 注册 的 回调 函数 ) 。 
o 否则 ， p 变 成 已 完成 状态 ， 返 回 的 结果 是 x 。 
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24.9.3 静态 的 Promise 方法 
Promise 的 所 有 静态 方法 支持 子 类 化 : 


* 它们 通过 所 谓 的 种 模式 (这 在 关于 类 的 那 一 章 有 详细 讲解 ) 创建 新 的 Promise 实例 


* 默认 情况 下 使 用 接收 器 ( this ) 作为 构造 器 。 
* 默认 值 可 以 通过 在 子 类 中 重 写 “`“[Symbol,.specjies]`” 来 覆盖 。 
* 其 它 静 态 方法 也 通过 种 模式 访问 (而 不 是 通过 `Promise 或 者 `this`” ) 。 


24.9.3.1 创建 Promise 
下 面 的 两 个 静态 方法 创建 它们 的 新 的 接收 器 实例 : 


e Promise.resolve(x) :将 任何 值 装 换 为 Promise 对 象 ， 使 其 和 thenable 
、Promise 表现 一 致 。 
o 如 果 x 是 thenable 的 ， 就 会 被 转换 成 Promise - 一 个 接收 器 实例 ( this 
; 此 处 未 使 用 种 模式 ) 。 
o 如 果 x 是 接收 器 实例 ， 该 实例 会 被 直接 返回 。 
o 否则 ， 返 回 接收 器 的 新 实例 ， 该 实例 处 于 完成 状态 ， 返 回 值 是 x 。 
。 Promise.reject(reason) :创建 一 个 新 的 接收 器 实例 (就 像 种 模式 中 配置 
的 一 样 ) ， 该 实例 处 于 失败 状态 ， 返 回 值 是 reason 。 


24.9.3.2 组 合 Promise 


从 表面 上 看 ， 静 态 方法 Promise.all() 和 Promise.race() 将 一 组 可 迭代 的 
Promise 转 变 为 一 个 单一 的 Promise 。 也 就 是 说 : 


e@ 可 和 迭 代 。 和 途 代 器 的 元 素 通过 this.resolve() 转换 为 Promise 。 


e@ Promise 对 象 。 该 Promise 对 象 是 一 个 新 的 接收 器 实例 (正如 
过 种 模式 配置 的 一 样 ) 。 


方法 是 : 


e Promise.all(iterable) : 返回 一 个 Promise .. 
o 如 果 和 迭代 器 中 所 有 元 京都 处 于 已 完成 状态 ， 则 返回 的 Promise 对 象 就 处 于 
已 完成 状态 。 已 完成 的 值 : 已 完成 值 的 数组 。 
o 如 果 有 任何 一 个 元 素 处 于 已 失败 状态 ， 则 返回 的 Promise 对 象 就 处 于 已 失 
败 状态 。 已 失败 的 值 : 第 一 个 失败 元 素 的 返回 值 。 


e Promise.race(iterable) : 迭代 器 中 只 要 有 一 个 元 素 处 于 稳定 状态 ， 那 么 
返回 的 Promise 就 会 立马 变 为 一 样 的 稳定 状态 。 


24.9.4 Promise.prototype 上 的 方法 
24.9.4.1 Promise.prototype.then(onFulfilled, onRejected) 


* onFulfilled 和 onRejected 回调 函数 被 称 为 reactions 。 
* 如 果 Promise 已 完成 或 者 只 要 Promise 变 成 已 完成 状态 ， 就 会 立刻 调用 onFul 
filled 。 类 似 地 ， 在 失败 的 时 候 也 会 调用 “onRejected 、。 
* “then() ”返回 一 个 新 的 Promise Q ( 通过 接收 器 的 构造 函数 种 类 ) 

* 如 果 两 个 回调 函数 中 的 一 个 返回 和 值 ， Q 以 该 值 变 为 resolved 状态 。 

* 如 果 两 个 回调 函数 中 的 一 个 抛 出 异常 ， Q 以 该 异常 变 为 rejected 状态 。 
* 省 略 回调 函数 : 

* 如 果 省 略 “onFulLfilled`” ， 那 么 fulfilled 状态 就 会 转发 给 “then() 
的 结果 。 

* 如 果 省 略 `onRejected`”， 那 么 rejected 状态 就 会 转发 给 `then(). 
的 结果 。 


回调 函数 的 默认 实现 可 能 像 这 样 : 


function defaultOnFulfilled(x) { 
return x; 

} 

function defaultOnRejected(e) { 
throw e; 

} 


24.9.4.2 Promise.prototype.catch(onRejected) 


。 p.catch(onRejected) 等 价 于 p,then(null, onRejected) 。 


24.10 Promise 的 优 缺 点 
24.10.1 优点 


24.10.1.1 统一 异步 API 
Promise 的 一 个 重要 优点 是 它 将 逐渐 被 用 作 浏览 器 的 异步 AP| ， 统 一 现在 各 种 各 样 
的 API ， 以 及 不 兼容 的 模式 和 手法 。 让 我 们 看 两 个 即将 到 来 的 基于 Promise 的 API 


fetch API 是 基于 Promise 的 ， 用 于 处 理 XMLHttpRequest 的 一 种 方式 : 


fetch(url) 
,then(request => request.text()) 
‘then(str => ..….:) 


在 实际 请 求 中 ， fetch() 返回 一 个 Promise ; text() 也 返回 一 个 Promise 
， 用 于 将 响应 内 容 转 换 成 字符 串 。 
ES6 中 可 编程 地 动态 引入 模块 也 是 基于 Promise 的 : 


System.import('some module.js') 
‘then(some module => { 


}) 


24.10.1.2 Promise 与 事件 对 比 

和 事件 相 比 较 ，Promise 更 适合 处 理 一 次 性 的 结果 。 在 结果 计算 出 来 之 前 或 之 后 注 
册 回 调 函 数 都 是 可 以 的 ， 都 可 以 拿 到 正确 的 值 。Promise 的 这 个 优点 很 自然 。 但 
是 ， 不 能 使 用 Promise 处 理 多 次 触发 的 事件 。 链 式 处 理 是 Promise 的 又 一 优点 ， 
但 是 事件 却 不 能 这 样 链 式 处 理 。 

24.10.1.3 Promise 与 回调 对 比 


和 回调 函数 比较 ，Promise 有 更 干净 的 沟 数 (或 者 方法 ) 签名 。 回 调 函 数 的 场景 ， 
主 函 数 既 有 输入 参数 ， 又 有 输出 参数 : 


// name 和 opt 是 输入 参数 ， (err，string | Buffer) => void 是 输出 参数 
fs.readFile(name, opts?, (err, string | Buffer) => void) 


图 时 时 |?» 








Promise 的 场景 ， 所 有 的 参数 都 是 输入 参数 : 


readFilePromisified(name, opts?) : Promise<string | Buffer> 


Promise 带 来 的 额外 好 处 是 包含 了 更 好 的 错误 处 理 方式 (包含 了 异常 处 理 ) ， 并 且 
写 起 来 很 轻松 (因为 可 以 重用 一 些 同步 的 工具 ， 比 如 Array.prototype.map() 
) o 


24.10.2 缺点 


Promise 可 以 很 好 地 处 理 单一 异步 结果 ， 不 适用 于 : 


@ 多 次 触发 的 事件 : 如 果 要 处 理 这 种 情况 ， 可 以 了 解 一 下 响应 式 编 程 ( reactive 
programming ) ， 这 是 一 种 很 聪明 的 链 式 的 处 理 普 通 事件 的 方法 。 
e 数据 流 : 支持 此 种 情形 的 标准 正在 制定 中 。 


ECMAScript 6 Promise 缺少 两 个 有 时 很 有 用 的 特性 : 

e@ 不 能 取消 执行 。 

e。 无 法 获取 当前 执行 的 进度 信息 (比如 ， 要 在 用 户 界面 展示 进度 条 ) 。 
Q Promise 库 对 于 后 者 提供 了 支持 ， 并 且 有 计划 将 两 种 能 力 都 添加 到 
Promises/A+ 规范 中 去 。 


24.11 Promise 和 generator 


在 下 面 的 代码 中 ， 我 使 用 流程 控制 库 Co 来 异步 读 取 两 个 JSON 文件 。 注 意 在 行 A 
， 执 行 块 会 一 直 等 到 promise.all() 处 理 完 成 。 这 意味 着 看 起 来 同步 的 代码 实 


际 上 执行 了 异步 的 操作 。 


co 人 iunctaon (On 


[发 
let [croftStr，bondStr] = yield Promise.all([ // (A) 


getFile('http://localhost:8000/croft.json'), 
getFile('http://localhost:8000/bond.json' ), 
]); 
let croftJson = JSON.parse(croftStr); 
Jet bondJson = JSON.parse(bondStr ) ， 


console.log(croftJson); 
console.log(bondJson); 
} catch (e) { 
console.log('Failure to read: ' + e); 
} 
}); 


详细 内 容 在 21.5.2.1 节 讲 解 。 


24.12 调试 Promise 


调试 Promise 的 工具 逐渐 在 浏览 器 中 出 现 了 。 让 我 们 看 下 最 新 的 谷歌 浏览 器 提供 了 
什么 。 下面 是 一 个 HTML 文件 的 一 部 分 ， 展 示 了 使 用 Promise 的 两 个 常见 问题 : 


<body> 
<script> 
// Unhandled rejection 
Promise.reject(new Error()) 
then(function (x) { return 'a'}) 
.then(function (x) { return 'b'}) 
/AAA Unsettled Promise 
new Promise(function () 他); 
</script> 
</body> 


第 一 段 JavaScript 代码 中 ， 没 有 处 理 异 常情 况 。 第 二 段 JavaScript 代码 中 ， 
Promise 没有 变 为 稳定 状态 。 谷 歌 浏 览 器 的 开发 者 工具 会 帮助 处 理 这 两 种 问题 。 


未 处 理 的 异常 将 会 被 打印 在 控制 台 里 


同时 也 会 在 监视 器 的 * source "标签 页 下 六 


可 
证 


最 后 ， 有 一 个 特殊 的 用 于 Promise 的 监视 器 会 记录 web 页 面 创建 的 所 有 Promise 
。 除 了 记录 其 它 东 西 ， 还 会 记录 : 


e 哪些 Promise 完成 了 (在 第 一 列 中 显示 绿色 圆 点 ) ， 哪 些 失败 了 (红色 贺 
点 ) ， 哪 些 还 在 执行 中 (灰色 圆 点 ) 
e Promise 是 如 何 连接 的 


24.13 Promise 内 部 机 制 


本 节 中 ， 我 们 将 会 从 一 个 不 一 样 的 角度 来 学 习 Promise : 我 们 将 会 简单 实现 
Promise ， 而 不 是 学 习 如 何 使 用 Promise API 。 这 种 不 同 的 视角 很 大 程度 地 帮助 我 
理解 了 Promise 。 


此 处 Promise 的 实现 叫做 DemoPromise “。 为 了 理解 起 来 更 容易 ， 并 没有 完全 符 
合 ES6 的 Promise API 。 但 是 仍然 足以 说 明 实 际 的 Promise 实现 会 遇 到 什么 挑 
战 。 


DemoPromise 可 以 在 GirHub 上 找到 ， 位 于 仓库 demo_promise 中 。 
DemoPromise 是 有 三 个 原型 方法 的 类 : 


e DemoPromise,.prototype,resolve(value ) 
e DemoPromise,.prototype,reject(reason ) 
e DemoPromise.prototype.then(onFulfilled, onRejected) 


也 就 是 说 ， resolve 和 reject 是 方法 (比较 传递 给 构造 函数 Promise 的 回调 
函数 的 参数 ) 。 


24.13.1 一 个 独立 的 Promise 


第 一 个 实现 是 一 个 独立 的 Promise ， 只 有 最 少 的 功能 


e 可 以 创建 Promise 

e@ 可 以 通过 ( resolve ) 或 者 拒绝 ( reject ) Ls ， 并 且 只 能 做 一 次 。 

e@ 可 以 通过 then() 注册 应 答 器 (回调 函数 ) 。 这 一 定 要 与 Promise 是 否 已 经 
o 该 方法 暂 不 支持 链 式 使 用 - 不 反悔 任何 东西 。 


下 面 是 如 何 使 用 第 一 个 版 本 的 Promise : 


let dp = new DemoPromise(); 

dp.resolve('abc' ); 

dp.then(function (value) { 
console.log(value); // abc 


}); 


下 图 说 明了 我 们 的 第 一 个 DemoPromise 是 如 何 工 作 的 : 


24.13.1.1 DemoPromise.prototype.then() 


首先 检查 then() 。 该 方法 处 理 两 种 情形 : 


e 如 果 Promise 还 处 于 pending 状态 ， 则 会 将 onFulfilled 和 
onRejected 的 调用 存储 在 队列 中 ， 当 Promise 稳定 下 来 的 时 候 就 使 用 。 

e。 如 果 Promise 已 经 处 于 fulfilled 状态 或 者 rejected 状态 ， onFulfilled 或 
者 onRejected 可 能 会 被 立刻 调用 。 


then(onFulfilled, onRejected) { 
let self = this; 
let fulfilledTask = function () { 
onFulfilled(self.promiseResult); 


let rejectedTask = function () { 
onRejected(self.promiseResult); 


switch (this.promiseState) { 

case 'pending': 
this.fulfillReactions.push(fulfilledTask); 
this.rejectReactions.push(rejectedTask); 
break; 

case 'fulfilled': 
addToTaskQueue(fulfilledTask ); 
break; 

Case "rejected 
addToTaskQueue(rejectedTask); 
break; 


上 面 的 代码 片段 使 用 了 下 面 的 辅助 函数 


function addToTaskQueue(task) { 
setTimeout(task, 0); 
} 


24.13.1.2 DemoPromise.prototype.resolvel() 


resolve() 像 下 面 这 样 工作 : 如 果 Promise 已 经 稳定 了 ， 什 么 事 也 不 做 (确保 
Em 只 能 变 为 稳定 状态 一 次 ) 。 否 则 ，Promise 的 状态 变 为 ”fulfilled ， 

结果 缓存 在 this.promiseResult 中 。 接 下 来 ， 触 发 所 有 之 前 存放 的 fulfilled 状 
态 相关 的 回调 函数 。 


resolve(value) { 

If (this.promiseState !== 'pending') return; 
this.promiseState = 'fulfilled'; 

this.promiseResult = value; 

this._ clearAndEnqueueReactions(this.fulfillReactions); 
return this; // enable chaining 

} 

_ClearAndEnqueueReactions(reactions) { 
this.fulfillReactions = undefined; 
this.rejectReactions = undefined; 
reactions ,map(addToTaskQueue ) ; 


reject() 类 似 于 resolve() 。 


24.13.2 链 式 
接 下 来 要 实现 的 特性 是 链 式 : 


e@ then() 返回 一 个 Promise ， 它 通过 onFulfilled 或 onRejected 的 返 
回来 变 成 resolved 状态 。 

e@ 如 果 省 略 onFulfiled 或 onRejected ， 那 么 不 管 接收 到 什么 ， 都 会 传 给 
then() 返回 的 Promise 。 


~ 
下 
过 


显 ， 只 需要 修改 ”then() 


then(onFulfilled, onRejected) { 
let returnValue = new Promise(); // (A) 
let self = this; 


let fulfilledTask; 
if (typeof onFulfilled === 'function') { 
fulfilledTask = function () { 
let r = onFulfilled(self.promiseResult); 
returnValue.resolve(r); // (B) 
}; 
} else { 
fulfilledTask = function () { 
returnValue.resolve(self.promiseResult); // (C) 


}; 
} 
Jet rejectedTask; 
If (typeof onRejected === 'function') { 
rejectedTask = function () { 
Jet r = onRejected(self.promiseResult); 
returnValue.resolve(r); // (D) 
}; 
} else { 
rejectedTask = function () { 
”onReyjected hasmnoe been irovided 
// => we must pass on the rejection 
returnValue.reject(self.promiseResult); // (E) 
}; 


} 


return returnValue; // (F) 


then() 创建 并 返回 了 一 个 新 的 Promise ( 行 A 和 F) ， fulfilledTask 和 
rejectedTask 被 分 别 设置 : 在 稳定 之 后 ...... 


e onFulfilled 的 返回 值 传 入 returnValue 的 resolve 方法 〈 行 B ) 。 
o 如 果 没 有 传 入 onFulfilled ， 就 将 当前 已 经 完成 的 值 传 入 
returnValue 的 resolve 方法 〈 行 C ) 。 
e onRejected 的 返回 值 传 入 returnValue 的 resolve 方法 (不 是 reject 方 
法 !) ( 行 D)。 
o 如 果 没 有 传 入 onRejected ， 就 将 当前 已 经 完成 的 值 传 入 
returnValue 的 reject 方法 〈 行 E ) 。 


24.13.3 扁平 化 ( Flattening ) 


扁平 化 主要 让 链 式 调用 更 加 方便 : 通常 情况 下 ， 将 响应 器 ( reaction ) 返回 的 值 传 
给 下 一 个 then() 。 如 果 返 回 一 个 Promise ， 并 且 内 部 并 没有 做 相应 的 “包装 ”， 
这 种 情形 是 非常 美好 的 ， 就 像 下 面 的 例子 : 


asyncFunc1() 
.then(function (value1) { 
return asyncFunc2(); // (A) 


}) 


then(function (value2) { 
// value2 is fulfillment value of asyncFunc2() Promise 
console.log(value2); 


}); 


在 行人 返回 一 个 Promise ， 没 必要 将 下 一 个 then() 内 衣 到 当前 方法 中 ， 可 以 在 
当前 方法 的 返回 值 上 调用 then() 。 所 以 : 没有 内 区 的 then() ， 所 有 内 容 保 
持 扁平 。 


通过 resolve() 方法 实现 这 种 扁平 功能 : 


e 用 Promise Q 来 解析 Promise P 意味 着 Q 的 稳定 情况 会 转发 给 P。 
e PP 被 “ 锁 在 了 ”Q 上 : 不 能 再 手动 变 为 resolved 状态 (同样 也 不 能 变 为 rejected 
状态 ) 。 它 的 状态 和 结果 总 是 和 Q 保持 一 致 。 


如 果 让 Q 变 成 thenable 对 象 (而 不 仅仅 是 一 个 Promise ) ， 那 么 就 可 以 让 扁平 化 
更 加 通用 ， 


为 了 实现 锁定 ， 引 入 一 个 新 的 布尔 标志 this.alreadyResolved 。 一 旦 该 值 变 为 
true ， this 就 被 锁定 了 ， 不 能 再 被 解析 ( resolve ) 了 。 注 意 此 时 this 
可 能 还 处 于 pending 状态 ， 因 为 它 的 状态 现在 和 锁定 到 的 Promise 一 致 。 


resolve(value) { 
if (this.alreadyResolved) return,; 
this.alreadyResolved = true; 
this._doResolve(value); 
return this; // enable chaining 


实际 的 解析 过 程 现在 发 生 在 私有 的 方法 _doResolve() 中 : 


_doResolve(value) { 
let self = this; 
/A/TJTs Value athenable? 
if (typeof value === 'object' && value !== Null && 'then' in 
value) { 
// Forward fulfillments and rejections from ‘value to . 
ns 
// Added as a task (vs. done immediately) to preserve as 
ync semantics. 
addToTaskQueue(function () { // (A) 
value. then( 
function onFulfilled(result) { 
self._ doResolve(result); 


}, 


function onRejected(error) { 
self._ doReject(error); 
}); 


}); 
} else { 


this.promiseState = 'fulfilled'; 
this.promiseResult = value; 
this._ clearAndEnqueueReactions(this.fulfillReactions); 


在 行人 处 理 了 扁平 化 : 如 果 value 是 fulfilled 状态 ， 我 们 希望 self 也 是 

fulfilled 状态 ; 如 果 value 是 rejected 状态 ， 我 们 希望 self 也 是 rejected 状 
态 。 通 过 私有 方法 _doResolve 和 _doReject 不 停 转 发 ， 绕 过 
alreadyResolved 标志 。 


24.13.4 Promise 状态 的 更 多 细节 


实现 链 式 特性 之 后 ，Promise 的 状态 更 加 复杂 了 (正如 ECMAScript 6 规范 的 25.4 
节 描 述 的 那样 ) 


如 果 你 仅 使 用 Promise ， 通 常 你 可 以 采用 一 种 简单 的 方式 ， 和 忽略 掉 锁 定 。 最 重要 的 
状态 相关 的 概念 仍然 是 “稳定 ( settledness ) ”: 一 个 Promise 在 变 为 fulfilled 状态 
或 rejected 状态 ， 就 稳定 了 。 在 Promise 稳定 之 后 ， 就 不 再 会 变化 了 (状态 和 最 终 
的 值 都 不 会 变化 ) 。 


如 果 你 想 实 现 Promise ， 那 么 "解析 ( resolving ) "也 很 重要 ， 并 且 现 在 很 难 理 
解 : 


e 直观 地 ，“ resolved ”的 意思 是 “不 能 再 被 (直接 地 ) 解析 了 ”。 如 果 一 个 
Promise 稳定 了 或 者 锁定 了 ， 那 么 就 变 成 了 resolved 状态 。 引 用 规范 里 面 
的 话 :“ 一 个 未 解析 ( unresolvyed ) 的 Promise 总 是 处 于 pending 状态 。 一 个 
解析 ( resolved ) 的 Promise 可 能 是 pending 状态 ， 也 可 能 是 fulfilled 或 


rejected 状态 ”。 

e 解析 ( resolving ) 不 一 定 会 使 Promise 变 为 稳定 状态 : 你 可 以 用 另外 一 个 总 
是 处 于 pending 状态 的 Promise 来 解析 某 个 Promise 。 

e。 解析 ( resolving ) 现在 包括 了 拒绝 ( rejecting ) ( 即 更 一 般 化 了 ) : 你 可 以 
通过 一 个 处 于 rejected 状态 的 Promise 来 解析 某 个 Promise ， 从 而 使 其 也 变 
为 rejected 状态 。 


24.13.5 异常 

最 后 一 个 特性 ， 我 们 硕 望 在 用 户 代码 抛 出 异常 的 时 候 进 入 拒绝 〈 rejection ) 回调 函 
数 。 此 处 ，“ 用 户 代 码 " 指 的 是 then() 的 两 个 回调 参数 。 

下 面 的 代码 展示 了 我 们 如 何 将 onFulfilled 中 抛 出 的 异常 转移 到 拒绝 回调 函数 


中 -通过 在 行 A 用 try-catch 包 庄 onFulfilled 的 调用 。 


then(onFulfilled, onRejected) { 


let fulfilledTask; 


if (typeof onFulfilled === 'function') { 
fulfilledTask = function () { 
[EN 


let r = onFulfilled(self.promiseResult); // (A) 
returnValue.resolve(r); 
} catch (e) { 
returnValue.reject(e); 
} 
}; 


} else { 
fulfilledTask = function () { 
returnValue.resolve(self.promiseResult); 


jr 


24.13.6 户 发 性 的 构造 器 模式 
如 果 我 们 想 将 DemoPromise 变 成 一 个 实际 可 用 的 Promise 实现 ， 还 需要 实现 局 


发 性 的 构造 器 模式 [5] : ES6 的 Promise 不 通过 方法 来 解析 ( resolve ) 和 拒绝 ( 
reject ) ， 而 是 通过 传递 给 执行 器 ( executor ) 的 函数 ， 即 构造 器 的 回调 参数 。 


如 果 执 行 器 抛 出 异常 ， 那 么 对 应 的 Promise 就 会 变 为 rejected 状态 。 
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24.14 两 个 有 用 的 Promise 附加 方法 


本 节 介 绍 两 个 很 有 用 的 方法 ， 这 两 个 方法 可 以 很 容易 的 添加 到 ES6 的 Promise 上 
面 去 。 很 多 更 全 面 的 Promise 库 都 有 这 两 个 方法 。 


24.14.1 done( ) 


当 你 链接 若干 个 Promise 方法 调用 的 时 候 ， 有 一 不 小 心 忘记 处 理 某 些 错 误 的 风险 。 
例如 : 


function doSomething() { 
asyncFunc() 
.then(f1) 
.Catch(r1) 
.then(f2); // (A) 


果 在 行人 A 的 then() 触发 了 拒绝 ( rejection ) ， 那 么 这 个 错误 将 不 会 被 处 理 。 
库 Q 提供 了 一 个 方法 done() ， 被 用 作 链 式 调用 的 最 后 一 个 调用 元 素 。 
done() 要 么 替换 掉 最 后 一 个 then() (此 时 有 一 到 两 个 参数 ) 


function doSomething() { 
asyncFunc() 
.then(f1) 
.Catch(r1) 
.done(f2); 


要 么 放 在 最 后 一 个 then() 的 后 面 ( 此 时 没有 参数 ) 


function doSomething() { 
asyncFunc() 


.then(f1) 
.Ccatch(r1) 
.then(f2) 
.done( ); 
} 
引用 QQ 的 文档 : 


done 和 nen 使 用 的 黄金 规则 就 是 : 要 么 返回 Promise 给 其 它 地 方 ， 要 以 
调用 done 结束 当前 Promise 链 (如 果 这 条 链 在 当前 位 置 结束 的 话 ) 。 用 
catch 来 结束 Promise 是 不 完美 的 ， 因 为 catch 的 处 理 器 自身 可 能 会 抛 出 错 


“器 
1 天 °， 


下 面 就 是 在 ECMAScript 6 中 实现 done() 的 方式 : 


Promise.prototype.done = function (onFulfilled, onRejected) { 
this.then(onFulfilled, onRejected) 
.Catch(function (reason) { 
AAA Throw an exception globally 
setTimeout(() => { throw reason }, 0); 
}); 
}; 


虽然 done 的 功能 很 有 用 ， 但 是 还 是 没有 添加 到 ECMAScript 6 中 去 ， 因 为 这 种 
检查 可 以 通过 引擎 自动 实现 (正如 在 调试 Promise 的 那 一 节 看 到 的 一 样 ) 。 


24.14.2 finally() 


有 时 你 想 执 行 一 些 操作 而 不 管 是 否 发 生 了 错误 。 例 如 ， 在 操作 完 一 个 资源 之 后 做 一 
些 ; 、 这 就 是 Promise 方法 finally 适用 的 场景 ， 它 和 异常 处 理 中 的 
finally 子 句 很 相似 。 它 的 回调 函数 不 接收 参数 ， 但 是 不 管 是 rejected 还 是 resolved 
状态 都 会 被 调用 。 


createResource(...:) 

.then(function (value1) { 
// Use resource 

}) 

.then(function (value2) { 
// Use resource 


}) 
.finally(function () { 
// Clean up 


je 


下 面 是 Domenic Denicola 提议 的 实现 finally() 的 方式 : 


Promise.prototype.finally = function (callback) { 
let P = this.constructor; 
// We don’t invoke the callback In here, 
// because we want then() to handle its exceptions 
return this,then( 


// Callback fulfills => continue with receiver’s fulfill 
ment or rejection 


// Callback rejects => pass on that rejection (then() ha 
s no 2nd paramet\ 


er!) 
value => P.resolve(callback()).then(() => value), 
reason => P.resolve(callback()).then(() => { throw reaso 
n }) 
); 
}; 


回调 函数 决定 了 接收 器 ( this ) 的 稳定 状态 处 理 的 方式 : 


e@ 如 果 回 调 函数 抛 出 异常 或 者 返回 一 个 rejected 状态 的 Promise ， 则 会 变 成 拒绝 
值 ( rejection value ) 。 

e 否则， 接收 器 的 稳定 状态 ( fulfilled 或 者 rejected ) 变 成 了 finally() 返回 
的 Promise 的 稳定 状态 。 在 某 种 程度 上 ， 我 们 把 finally 从 方法 链 上 脱离 
出 来 了 。 


示例 1 (作者 Jake Archibald ) 使 用 finally() 隐藏 一 个 spinner 。 简 单 的 版 
本 : 


ShowSpinner() ， 

fetchGalJleryDatal( ) 

,then(data => updateGallery(data)) 
.Catch(showNoDataError) 
,finally(hideSpinner ) ， 


示例 2 (作者 Kris Kowal ) 使 用 finally() 拆 分 一 个 测试 : 


let HTTP = require("q-io/http"); 
let server = HTTP.Server(app); 
return server.listen(0) 
.then(function () { 

// run test 
}) 


.finally(server.stop); 


24.15 兼容 ES6 的 Promise 库 


现在 已 经 有 很 多 的 Promise 库 了 。 下 面 的 库 部 站 箱 ECMAScript 6 API 标准 ， 这 意 
味 着 你 现在 就 可 以 使 用 Promise 了 ， 并 且 以 后 能 轻松 迁移 到 原生 的 ES6 上 去 。 


e Stefan Penner 的 “RSVP.js ” 是 ES6 Promise API 的 一 个 超 集 。 
o Jake Archibald 的 “ES6-Promises "从 RSVPjs 中 提取 出 了 仅 包 含 ES6 
API 的 部 分 
e Kyle Simpson 的 “ Ee Promise Only (NP 
pollyfill ， 尽 量 严 格 地 遵循 (没有 扩展 ) 规范 ” 
e Calvin Metcalf 的 “ a 是 “一 个 小 的 高 性 能 的 
Promises/At+ 规范 
e Kris Kowal 的 “ Ce ”实现 了 ES6 API 。 
。 最 后 ，Paul Millr 的 “ES6 Shim "包含 了 Promise 。 


' 是 “原生 ES6 Promise 的 一 个 


O) 
Promise 库 ， 实 现 了 


24.16 与 传统 弄 步 代码 对 接 


当 你 使 用 一 个 Promise 库 的 时 候 ， 有 些 时 候 需 要 使 用 非 基 于 Promise 的 异步 代 
码 。 本 节 讲 解 了 对 于 Node.js 风格 的 异步 函数 和 jQuery deferreds ， 如 何 对 接 。 


24.16.1 与 Node.js 对 接 


Promsie 库 Q 有 几 个 工具 方法 用 于 把 使 用 Node.js 风格 (err,result) 回调 函数 
作为 参数 的 函数 转换 成 返回 Promise 的 函数 〈 甚 至 有 做 反 向 转换 的 函数 - 将 基于 
Promise 的 函数 转换 成 接收 回调 函数 的 函数 ) 。 例 如 : 


Jet readFile = Q.denodeify(FS.readrFile); 


readFile('foo.txt', 'utf-8') 
:then(function (text) { 


}); 


denodify 是 一 个 小 型 的 库 ， 仅 提供 转换 功能 ， 转 换 成 符合 ECMAScript 6 Promise 
API 标准 的 形式 。 


24.16.2 与 jQuery 对 接 


jQuery 有 deferreds ， 和 Promise 很 像 ， 但 是 有 几 处 不 同 导 致 无 法 兼容 。 
deferreds 的 方法 then() 非常 像 ES6 Promsie 的 then() (主要 不 同 点 : 
deferreds 并 不 会 在 响应 器 中 捕获 异常 ) 。 所 以 ， 可 以 使 用 promise.resolve() 
把 jQuery deferred 转换 成 ES6 Promise : 


Promise.resolvel 
jQuery.ajax({ 
url: 'somefile.html', 
type: 'GET' 
})) 
.then(function (data) { 
console.log(data); 


.Catch(function (reason) { 
console.error(reason); 


je)e 


24.17 深入 阅读 
[1]“ Promises/A+ ”， 编 辑 者 : Brian Cavalier 和 Domenic Denicola ( JavaScript 
Promise 的 实际 标准 ) 


[2]“ JavaScript Promises: There and back again ”， 作 者 : Jake Archibald (很 好 
的 Promise 介绍 文 ) 


[3]“ Promise Anti-Patterns ”， 作 者 : Tao of Code (技巧 和 技术 ) 
[4]“ Promise Patterns ”， 作 者 : Forbes Lindesay 


[5]“ The Revealing Constructor Pattern ”， 作 者 : Domenic Denicola ( Promise 
构造 器 使 用 了 此 种 模式 ) 


这 是 一 个 略微 的 简化 。 实 际 上 ， 元 素 通过 C.resolve() 转换 ，C 又 由 种 模式 决定 。 


